Pallas UI
DocsComponents
Core Concepts
Previews

Grid

A layout component that creates two-dimensional grid-based layouts with precise control over placement and sizing.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Usage

import { Grid } from '@styled-system/jsx'
<Grid 
  columns={3}
  gap={4}
>
  <Box p={4}>Item 1</Box>
  <Box p={4}>Item 2</Box>
  <Box p={4}>Item 3</Box>
  <Box p={4}>Item 4</Box>
  <Box p={4}>Item 5</Box>
  <Box p={4}>Item 6</Box>
</Grid>

Properties

Grid accepts all common properties mentioned in the layout guide along with these grid-specific properties:

Grid Container Properties

PropertyCSS PropertyDescription
columnsgrid-template-columnsThe number of columns in the grid
gapgapThe gap between the elements in the stack
columnGapcolumn-gapThe gap between the elements in the stack horizontally
rowGaprow-gapThe gap between the elements in the stack vertically
minChildWidthmin-widthThe minimum width of the child elements before wrapping (must not be used with columns)

Grid Item Properties

PropertyCSS PropertyDescription
colSpangrid-columnThe number of columns the item spans
rowSpangrid-rowThe number of rows the item spans
colStartgrid-column-startThe column the item starts at
colEndgrid-column-endThe column the item ends at
rowStartgrid-row-startThe row the item starts at
rowEndgrid-row-endThe row the item ends at

Examples

Basic Grid

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Responsive Grid

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Grid Template Areas

Header
Sidebar
Main Content
Footer

Item Placement

Header
Sidebar
Main Content
Footer

Auto-fill and Auto-fit

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8