Grid

Source

A Box preset for css grid. Grid defaults to display grid and exposes the grid properties under short names. Every other Box prop, including gap, padding, color, and responsive objects, is inherited.

Overview

Grid for two-dimensional layouts. GridItem for children that span tracks or sit in a named area.

Grid is a Box, so spacing uses steps through gap, rowGap, and columnGap, and every prop takes a responsive object. Track lists such as repeat(3, 1fr) stay typed as strings; lines and placements have a small grammar of their own.

Basic grid

Three equal columns

templateColumns with a step gap.

<Grid templateColumns="repeat(3, 1fr)" gap="3">
  <Cell>1</Cell>
  <Cell>2</Cell>
  <Cell>3</Cell>
  <Cell>4</Cell>
  <Cell>5</Cell>
  <Cell>6</Cell>
</Grid>

Responsive columns

A responsive object on templateColumns changes the track count per breakpoint.

<Grid
  templateColumns={{ base: "1fr", md: "repeat(2, 1fr)", xl: "repeat(4, 1fr)" }}
  gap="3"
>
  {items.map((item) => (
    <Cell key={item.id}>{item.label}</Cell>
  ))}
</Grid>

Template areas

Name regions with templateAreas and place children with GridItem area.

header

sidebar

main

<Grid
  templateAreas={'"header header" "sidebar main"'}
  templateColumns="160px 1fr"
  gap="3"
>
  <GridItem area="header">...</GridItem>
  <GridItem area="sidebar">...</GridItem>
  <GridItem area="main">...</GridItem>
</Grid>

Spans and placement

GridItem covers tracks with colSpan and rowSpan, or sits at colStart, colEnd, rowStart, rowEnd.

colSpan 2

colStart 3, rowSpan 2

auto

<Grid templateColumns="repeat(4, 1fr)" gap="3">
  <GridItem colSpan={2}>colSpan 2</GridItem>
  <GridItem colStart={3} colEnd={5} rowSpan={2}>colStart 3, rowSpan 2</GridItem>
  <GridItem>auto</GridItem>
  <GridItem>auto</GridItem>
</Grid>