Masonry Grid React component
A masonry layout for tiles of different heights: each tile drops into the shortest column while keeping left-to-right order, the column count follows the container's width, and tiles spring to their new places when it changes.
When to use the Masonry Grid component
Use Masonry Grid for collections whose items have different heights: photo galleries, mood boards, testimonial walls, notes and pins. Nothing gets cropped to a fixed row height and there are no gaps under short items.
For items of equal size a plain CSS grid is simpler; for a curated layout with deliberate big and small tiles, use Bento Grid.
Installation
Add the Masonry Grid component to your project with the shadcn CLI. It lands in components/masonry-grid.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/masonry-grid.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<MasonryGrid /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| children The tiles. Any content works; heights are measured. | React.ReactNode | — |
| columns A fixed number of columns. Leave out to fit as many as minColumnWidth allows. | number | — |
| minColumnWidth | number | 200 |
| maxColumns | number | 4 |
| gap | number | 12 |
| animateIn Tiles fade up one after another the first time they're placed. | boolean | true |
| className | string | — |
- children
The tiles. Any content works; heights are measured.
React.ReactNode - columns
A fixed number of columns. Leave out to fit as many as minColumnWidth allows.
number - minColumnWidthnumberDefault: 200
- maxColumnsnumberDefault: 4
- gapnumberDefault: 12
- animateIn
Tiles fade up one after another the first time they're placed.
booleanDefault: true - classNamestring
FAQ
- Does it keep the order of my items?
- Yes. Items are taken in order and each goes into the shortest column, so the first items stay near the top and the grid reads left to right, unlike CSS columns which fill top to bottom.
- What happens when images load or the window resizes?
- Every tile's height and the container's width are watched, so the layout recalculates and tiles spring to their new positions.
- How many columns will it show?
- As many as fit at minColumnWidth, up to maxColumns. Pass columns to fix the number instead.
