Masonry
A responsive multi-column masonry grid with a staggered reveal on scroll.
layoutmotionreveal
Customize
Layout
Columns3
Gap16px
Corner radius14px
Min column width200px
Columns drop below this width.
Motion
Reveal stagger0.06s
Hover scale1.03
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | MasonryItem[] | gradient set | Tiles ({ title?, subtitle?, height?, background? }). |
columns | number | 3 | Target number of columns at full width. |
gap | number | 16 | Gap between tiles in pixels. |
minColumnWidth | number | 200 | Column count drops on narrow containers below this width per column. |
radius | number | 14 | Tile corner radius in pixels. |
hoverScale | number | 1.03 | Scale applied to a tile on hover (1 disables). |
stagger | number | 0.06 | Seconds of delay added per column position during the reveal. |
label | string | "Masonry gallery" | Accessible name for the grid. |