Grid
CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required.
Category: layout · WCAG 2.1-AA · layout, grid, columns
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cols | number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number } | 12 | Column count — a number, or a per-breakpoint object (base/sm/md/lg/xl) for responsive columns |
gap | 1|2|3|4|5|6|8|10|12 | 4 | Spacing token step. Maps to the --cascivo-space-* scale, which intentionally skips 7/9/11 — use 6 or 8. |
align | 'start' | 'center' | 'end' | 'stretch' | — | Block-axis alignment of items within their cells (align-items); default stretch |
justify | 'start' | 'center' | 'end' | 'stretch' | — | Inline-axis alignment of items within their cells (justify-items); default stretch |
span | number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number } | — | GridItem: column span — a number, or a per-breakpoint object |
Design tokens
--cascivo-space-*
When to use
- Two-dimensional layouts with an explicit column count
- Arranging cards or tiles that should align in rows and columns
When not to use
- Single-direction stacking — use Stack
- Columns that auto-fit to available width — use AutoGrid
Examples
Basic grid
3-column grid with spanning item
<Grid cols={3} gap={4}><GridItem span={1}>A</GridItem><GridItem span={2}>B</GridItem></Grid>Responsive dashboard grid
1 column on mobile, 2 on tablet, 3 on desktop; the first item spans 2 on desktop
<Grid cols={{ base: 1, md: 2, lg: 3 }} gap={4}><GridItem span={{ base: 1, lg: 2 }}>Wide</GridItem></Grid>