Masonry
The display: grid-lanes or display: inline-grid-lanes CSS declaration creates a layout where items are tightly packed, like brickwork, in parallel lanes. Items are placed one by one in the lane that has the most available space.
Overview
The display: grid-lanes or display: inline-grid-lanes CSS declaration creates a layout where items are tightly packed, like brickwork, in parallel lanes. Items are placed one by one in the lane that has the most available space.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.grid-template-columns.masonry Experimental | | | 77 | Preview | | |
| CSS property | ||||||
masonry Experimental Level 3 of the CSS grid layout specification defines masonry layout (also known as grid-lanes layout), which is accessed via the display values grid-lanes and inline-grid-lanes. This guide details what masonry layout is and how to use it. | | | 77 | Preview | | |
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
Syntax
.gallery {
display: grid-lanes;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Live demo
Use cases
Component layout
Use Masonry to create more predictable spacing and placement inside reusable UI patterns.
Responsive structure
Adapt containers and flow rules so layouts stay stable across viewport changes.
Cautions
- Test layout rules with real content, long labels, and small screens before depending on them broadly.
- Prefer simpler layout primitives if they already solve the problem clearly.
Accessibility
- Layout choices should preserve reading order and support zoom without clipping.
- Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.
Related links
Powered by web-features