Masonry
v1.0.1Updated 20 Jul 2026CSS multi-column staggered grid with responsive column counts and consistent gap. Use for mixed-height media galleries and pin boards.
Preview
Live · 8 storiesDefaultOpen ↗
▸Why this is recommendedmasonrygridcolumnsgallery+4
The default, out-of-the-box Masonry.
Recommended for+14
- ✓Image galleries
- ✓Pin / quote boards
- ✓Mixed-height marketing cards
Tags+6
masonrygridcolumnsgallerypinterestmuilayoutdefault
Features+4
- CSS column-count engine (no JS)
- Responsive columns by breakpoint
- Configurable gap
- Mixed-height children without gaps
Not recommended for−2
- ✕Uniform grids (use ImageList)
- ✕Tabular data (use DataTable)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
columnsColumn count (or responsive map)
—gapGap between items
—