Orbit

Grid

Source

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

Overview

Use Grid for two-dimensional layouts and GridItem for children that span tracks or are placed explicitly.

Because Grid is a Box, spacing uses tokens through gap, rowGap and columnGap, and every prop accepts a responsive object. Track lists such as repeat(3, 1fr) stay typed as strings, while line and placement values have a constrained grammar.

Basic grid

Three equal columns

templateColumns with a token gap.

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

Responsive columns

Pass a responsive object to templateColumns to change the track count per breakpoint.

<Grid
  templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)', xl: 'repeat(4, 1fr)' }}
  gap="m"
>
  {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="m"
>
  <GridItem area="header">…</GridItem>
  <GridItem area="sidebar">…</GridItem>
  <GridItem area="main">…</GridItem>
</Grid>

Spans and placement

GridItem covers tracks with colSpan and rowSpan, or places explicitly with colStart, colEnd, rowStart and rowEnd.

colSpan 2

colStart 3, rowSpan 2

auto

<Grid templateColumns="repeat(4, 1fr)" gap="m">
  <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>