MasonryGrid
Columns of unequal-height cards packed without gaps — the activity feed. A regular Grid would leave a ragged bottom edge in every row.
import MasonryGrid from '@/components/ui/MasonryGrid';Source: src/components/ui/MasonryGrid.tsx
Examples
Uneven cards
Order runs down each column, not across rows. That is inherent to CSS columns and it is why this is a separate component rather than a Grid variant: for a feed, down-then-across is fine; for anything ranked, it is wrong.
Short
Taller
card
here
card
here
Short
Another
tall one
tall one
Short
Props
<MasonryGrid> props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | React.ReactNode | — | The cards, in feed order. Arrays are flattened (so `{firstPage}{appended}` works), but a single `<>…</>` around them all counts as ONE child and would get one wrapper — pass the arrays, not a Fragment. |
className | string | '' | — |
Usage
Don’t
- Don’t use it where reading order matters — the visual order is column-major and does not match the DOM order across columns.
Related:Grid