The Grid layout primitive is a thin abstraction over the CSS grid layout.

Alternatives

Flex — For vertical layouts
Columns — For horizontal layouts, with prescriptive and exact child widths

Usage

Grid Template columns and rows

grid-template-columns and grid-template-rows allows to map to column and row layout respectively.

<Grid
  gridTemplateColumns="5rem 5rem 5rem"
  gridTemplateRows="5rem 5rem"
  gap="small"
  background="muted"
>
  <Box background="informative" padding="medium">
    1
  </Box>
  <Box background="informative" padding="medium">
    2
  </Box>
  <Box background="informative" padding="medium">
    3
  </Box>
  <Box background="informative" padding="medium">
    4
  </Box>
</Grid>

6-column grid

grid-template-columns can be used to define N-column grid.

Edit in Playroom

<Grid gridTemplateColumns="repeat(6, 1fr)" columnGap="small">
  <Box background="dim" padding="medium">
    1
  </Box>
  <Box background="dim" padding="medium">
    2
  </Box>
  <Box background="dim" padding="medium">
    3
  </Box>
  <Box background="dim" padding="medium">
    4
  </Box>
  <Box background="dim" padding="medium">
    5
  </Box>
  <Box background="dim" padding="medium">
    6
  </Box>
</Grid>

2-column layout with varying width

grid-template-columns allows to have a grid with varying column widths.

Edit in Playroom

<Grid gridTemplateColumns="minmax(150px, 1fr) 3fr" columnGap="small">
  <Box background="dim" padding="medium">
    <Text>1/4 width</Text>
    <Text size="xsmall">(min-width: 150px)</Text>
  </Box>
  <Box background="dim" padding="medium">
    3/4 width
  </Box>
</Grid>

Layout using Template Area

grid-template-areas defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.

Edit in Playroom

<Grid
  gridTemplateAreas={`
        'header header header'
        'sidebar content content'
        'footer footer footer'
      `}
  gap="small"
>
  <Box style={{ gridArea: 'header' }} background="dim" padding="medium">
    Header
  </Box>
  <Box style={{ gridArea: 'sidebar' }} background="dim" padding="medium">
    Sidebar
  </Box>
  <Box style={{ gridArea: 'content' }} background="dim" padding="medium">
    Content
  </Box>
  <Box style={{ gridArea: 'footer' }} background="dim" padding="medium">
    Footer
  </Box>
</Grid>

Grid column start / end & Grid row start / end

grid-column-start, grid-column-end, grid-row-start and grid-row-end determine a grid item’s location within the grid by referring to specific grid lines.

Note: These are 'grid item' (not a 'grid container') specific props.

Edit in Playroom

<Grid
  gridTemplateColumns="repeat(4, 1fr)"
  gridTemplateRows="repeat(4, 1fr)"
  gap="small"
>
  <Box background="dim" padding="medium">
    1
  </Box>
  <Box
    gridColumnStart="2"
    gridColumnEnd="4"
    gridRowStart="1"
    gridRowEnd="3"
    background="dim"
    padding="medium"
  >
    2
  </Box>
  <Box background="dim" padding="medium">
    3
  </Box>
  <Box background="dim" padding="medium">
    4
  </Box>
  <Box background="dim" padding="medium">
    5
  </Box>
  <Box background="dim" padding="medium">
    6
  </Box>
  <Box background="dim" padding="medium">
    7
  </Box>
  <Box background="dim" padding="medium">
    8
  </Box>
  <Box background="dim" padding="medium">
    9
  </Box>
</Grid>