Grid
Responsive grid layout with fixed or auto-fit columns, gap control, and container queries.
Example
1
2
3
Auto 1
Auto 2
Auto 3
Auto 4
Responsive 1
Responsive 2
Responsive 3
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
columns | Responsive<number | 'auto'> | 1 | No | Number of columns, or "auto" for responsive auto-fit. Accepts a responsive object for breakpoint-specific values. |
gap | Responsive<0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16> | — | No | Gap between grid items. Accepts a responsive object for breakpoint-specific values. |
minItemSize | string | — | No | Minimum item width for auto-fit columns (CSS value, e.g. "var(--layout-60)") |
Accessibility
- Renders a plain <div> — no ARIA roles needed
- Grid layout is purely visual and does not affect accessibility tree
Related Tokens
--grid-columns-default--grid-gap-default--grid-min-item-size