Masonry
Cards & Layout
A responsive masonry grid that distributes items across columns balanced by height, with staggered entry animations.
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | MasonryItem[] | — | Array of items with id, height, and optional content/image/className. |
columnCount | number | 0 | Number of columns. 0 = responsive (1 on mobile, 2 on sm, 3 on md, 4 on lg). |
gap | number | 16 | Gap between items in pixels. |
animationDuration | number | 0.6 | Duration of the entry animation in seconds. |
stagger | number | 0.05 | Delay between each item animation in seconds. |
scaleOnHover | boolean | true | Whether items scale slightly on hover. |
className | string | '' | Additional CSS classes for the container. |