Masonry Grid
A responsive masonry layout for items of different heights.
Examples
Images
The default layout uses CSS columns: no JavaScript places the items, and they read down each column. revealOnView lets each item rise into place once, the first time it comes into view.
Mixed cards
layout='balanced' keeps the reading order from left to right: each item goes to the bottom of the shortest column. Use it when the order matters, as in a feed.
Leave the harbour at 08:30, lunch at the ridge hut, and walk down before the light goes. The last ferry is at 20:10.
- Two warm layers
- Ferry tickets
- Long lens
- Headlamp
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-masonry-grid.jsonComponent API
MasonryGrid
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | The items, each with a key. | |
layout | 'columns' | 'balanced' | 'columns' | CSS columns read down each column; balanced keeps the order across the columns. |
columnWidth | number | 220 | The narrowest a column may get, in pixels. It sets how many columns fit. |
maxColumns | number | 4 | The most columns, however wide the grid. |
gap | number | 16 | The space between columns and between items, in pixels. |
revealOnView | boolean | false | Each item fades and rises 12px in 320ms, once, when it first comes into view. |
className | string | Classes of the grid. |
The entrance is off by default: inside an application, content should not wait for the scroll to appear. Turn it on for marketing pages. Under reduced motion the items are always shown as they are. Items of the same row enter 40ms apart in the balanced layout.
The balanced layout measures the items once they are rendered, before the browser paints, and again when the number of columns changes. Give images a fixed aspect ratio so their height is known before they load.