Masonry Element
The Masonry element creates a pinterest-style grid layout, optimized for items with unequal heights while maintaining a clean column structure.
Live Preview
Preview how the masonry grid handles dynamic item heights below.
Masonry Preview
Specifications
The Masonry element provides adaptive multi-column layouts:
- Column Count: Define the number of Columns that the items should wrap into.
- Grid Spacing: Control the Gap (px) between elements for consistent visual breathing room.
- Dynamic Heights: Automatic recalculation of vertical positions to minimize empty space between items.
- Optimized Performance: Smoothly handles large collections of Images, Cards, or Containers.
- Thematic Integration: Perfectly matches the site's responsive behavior with full layout control through the styling prop.
AI Guidance
How to prompt for Masonry:
- Add a masonry grid for our project showcase with 3 columns.
- Create a image gallery masonry that uses a small gap between pictures.
- Insert a masonry layout for the testimonial cards.