Masonry
Masonry layout — native CSS masonry where supported, multi-column fallback elsewhere (fallback orders items top-to-bottom per column).
Category: layout · WCAG 2.1-AA · layout, masonry, gallery
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cols | number | 3 | Number of columns |
gap | 1|2|3|4|5|6|8|10|12 | 4 | Spacing token step |
Design tokens
--cascivo-space-*
When to use
- Galleries of variable-height items packed into balanced columns
- Pinterest-style image or card walls
When not to use
- Items that must align in rows — use Grid
- Uniform-height cards — use AutoGrid
Examples
Masonry gallery
Variable-height cards laid out in a masonry pattern; falls back to CSS columns
<Masonry cols={3} gap={4}>{items.map(item => <Card key={item.id}>{item.content}</Card>)}</Masonry>Related components
- AutoGrid — Use when items are uniform height and should align in rows
- MediaMasonry — Use the section-level masonry for full-width media galleries