AutoGrid
Media-query-free responsive grid — columns auto-fill based on available space.
Category: layout · WCAG 2.1-AA · layout, grid, responsive
Props
| Prop | Type | Default | Description |
|---|---|---|---|
min | string | "16rem" | Minimum track width before items wrap to fewer 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. |
Design tokens
--cascivo-space-*
When to use
- Responsive card or tile grids that auto-fit columns to available width
- Avoiding media queries — tracks wrap based on a minimum track width
When not to use
- A fixed, known column count — use Grid
- Single-direction stacking — use Stack
Examples
Auto-filling grid
Items fill available space and wrap when narrower than 12rem
<AutoGrid min="12rem" gap={4}><div>Card 1</div><div>Card 2</div><div>Card 3</div></AutoGrid>Related components
- Grid — Use when an explicit column count is required