Grid

A compound component for building responsive column grids. Grid.Root wraps children in a wrapping row; Grid.Item computes its own width from Dimensions.get('window'), the number of columns, and the span it should occupy. This assumes the grid fills the device's full screen width, which holds in a real app but not inside this docs page's preview card, so the live preview below uses a plain Row instead. The code sample is the real, correct Grid.Item usage.

<Grid.Root gap="s-2">
  <Grid.Item span={8} columns={12} colGap={8}>
    <Box bg="primary" h={48} rounded="r-2" />
  </Grid.Item>
  <Grid.Item span={4} columns={12} colGap={8}>
    <Box bg="primarySubtle" h={48} rounded="r-2" />
  </Grid.Item>

  <Grid.Item span={4} columns={12} colGap={8}>
    <Box bg="secondary" h={48} rounded="r-2" />
  </Grid.Item>
  <Grid.Item span={4} columns={12} colGap={8}>
    <Box bg="secondary" h={48} rounded="r-2" />
  </Grid.Item>
  <Grid.Item span={4} columns={12} colGap={8}>
    <Box bg="secondary" h={48} rounded="r-2" />
  </Grid.Item>
</Grid.Root>

Props

Grid.Root accepts all Box props except direction and wrap, which are fixed (row / wrap).

Grid.Item props:

Prop	Type	Default	Description
`span`	`1 \| 2 \| ... \| 12`	`1`	How many columns this item spans.
`columns`	`1 \| 2 \| ... \| 12`	`2`	Total columns in the grid, used to compute item width.
`colGap`	`number`	`0`	Gap (in px) between columns, subtracted from the computed width.
`screenPadding`	`number`	`0`	Horizontal screen padding to subtract before computing column width.

Grid.Item also accepts all other Box props (bg, spacing, rounded, etc.); its computed w is applied internally.

Props​

Props