Columns
Equal-width multi-column layout that collapses to single column on narrow viewports.
Category: layout · WCAG 2.1-AA · layout, grid, columns
Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | 2|3|4 | 2 | Number of equal columns |
gap | 1|2|3|4|5|6|8|10|12 | 4 | Spacing token step |
Design tokens
--cascivo-space-*
When to use
- Equal-width multi-column content that collapses to one column when narrow
- Side-by-side text or content blocks at a fixed column count
When not to use
- Card grids that auto-fit to width — use AutoGrid
- Single-direction stacking — use Flex
Examples
Three columns
Three equal columns
<Columns count={3}><div>A</div><div>B</div><div>C</div></Columns>