Bento Grid
Bento & Grids
Source and install need .
pnpm dlx shadcn@latest add @assembli/masonry-gridMasonry Grid
A masonry wall that drops each item into the shortest column, in order, so reading and tab order still run top to bottom. Column count follows the container's width, items are re-placed when one resizes, and they glide to new spots. CSS columns cover the first paint, so there's no jump. Demo: a moodboard with load more.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
minColumnWidth
number
Default
240Columns never get narrower than this, in px. The count follows the container's width, not the viewport's.
maxColumns
number
Default
4The most columns to use, however wide the container.
gap
number
Default
16Space between items, in px.
animate
boolean
Default
trueGlide items to their new spots when the layout changes. Off under reduced motion. Defaults to
true.
| Prop | Type | Default | Description |
|---|---|---|---|
| minColumnWidth | number | 240 | Columns never get narrower than this, in px. The count follows the container's width, not the viewport's. |
| maxColumns | number | 4 | The most columns to use, however wide the container. |
| gap | number | 16 | Space between items, in px. |
| animate | boolean | true | Glide items to their new spots when the layout changes. Off under reduced motion. Defaults to true. |
