Masonry
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a stacking (masonry) layout. On the stacking axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to fill the gaps.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.grid-template-rows.masonry Experimental | | | 77 | Preview | | |
| CSS property | ||||||
masonry Experimental | | | 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.