Masonry
Layout
Masonry layout system with configurable columns for Pinterest-style cascading grid layouts
Basic Usage
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Columns & Gap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Real World Example
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Usage Guidelines
When to Use
- Pinterest-style galleries
- Variable height content
- Blog post grids
Accessibility
- Preserves DOM order for screen readers
- Logical tab sequence maintained
Performance
- CSS columns implementation
- Lightweight alternative to JS masonry
Common Mistakes
- Using for uniform height items (use Grid)
- Too many columns on mobile
Frequently Asked Questions
Masonry creates Pinterest-style cascading layouts where items fill vertical gaps, creating a dynamic grid.
Yes, Masonry maintains DOM order for screen readers while visually reorganizing content with CSS.
Related Components
View allContainer
Responsive container implementing max-width constraints with fluid padding and automatic centering for consistent content alignment across breakpoints
Grid
CSS Grid-based layout system with configurable columns, gaps, and responsive GridItem children supporting explicit placement and spanning
Paper
Material-style elevated surface with shadow variants and glass morphism effects
Section
Semantic HTML5 section wrapper with built-in spacing utilities and accessibility landmarks for document structure organization