Grid

CSS Grid layout primitive. columns/rows take a fixed scale (1–12 / 1–6) rather than an arbitrary grid-template-columns string, keeping every grid in the system on the same rhythm.

<Grid>
  ...
</Grid>

Examples

A responsive card grid — fewer columns as the viewport narrows, same gap throughout:

<Grid columns="3" m={{ columns: "2" }} s={{ columns: "1" }} gap="16">
  <Card>One</Card>
  <Card>Two</Card>
  <Card>Three</Card>
</Grid>

colSpan="full"/rowSpan="full" on an individual child stretch it across every track in that axis — useful for a banner or a section heading that should break out of the grid it sits in:

<Grid columns="3" gap="16">
  <Card colSpan="full">Featured — spans the full width</Card>
  <Card>Regular</Card>
  <Card>Regular</Card>
</Grid>

Reach for Flex (or Row/Column) instead when items should size to their own content rather than snap to a fixed number of tracks — Grid is for a layout that's genuinely a grid, not a one-dimensional list that happens to wrap.

Props