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.
Status
Limited availability
MDN documentation
Specifications
Browser support (view on caniuse.com)
- Chrome ❌ See issues.chromium.org/issues/343257585 crbug.com/40128480
- Chrome Android ❌ See crbug.com/40128480
- Edge ❌ See crbug.com/40128480
- Firefox ❌ See bugzil.la/1981604 bugzil.la/1757446
- Firefox for Android ❌
- Safari ❌ See webkit.org/b/248287 Vendor position : support
- Safari on iOS ❌ Vendor position : support
Surveys
Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper votes
Do you need this feature?
Let us know by leaving a 👍 reaction on the feedback issue. Don't forget to also leave a comment explaining your specific use case.
Developer use cases
-
I want to have a way to do masonry layout — with many layout possibilities — without having to use JavaScript.
I want to have a way to do masonry layout — with many layout possibilities — without having to use JavaScript. [see original comment] -
I want a denser view of projectwallace.com's CSS analysis panels. The lengths of the panels depends on the website analyzed, so there can be big gaps if there are many prefixed selectors but none with browserhacks, for example. | before | after | |--------|-------| | <img width="1171" height="762" alt="Project Wallace CSS analysis page. It shows 8 panels with data like tables and headings across two grid rows. Each panel has a different height. The first row has one column that is significantly shorter than the others, causing a big gap of unused space." src="https://github.com/user-attachments/assets/5962d21c-538b-42f0-8d48-196e38afbb83" /> | <img width="1170" height="762" alt="Project Wallace CSS analysis page. It shows 10 panels with data like tables and headings. Each panel has a different height and all panels are packed densely together, leading to a staggered edge at the bottom of the end of the list of panels.ge" src="https://github.com/user-attachments/assets/1a39978b-94ea-402b-995f-0d3b95167c62" /> |
I want a denser view of projectwallace.com's CSS analysis panels. The lengths of the panels depends on the website analyzed, so there can be big gaps if there are many prefixed selectors but none with browserhacks, for example. | before | after | |--------|-------| | <img width="1171" height="762" alt="Project Wallace CSS analysis page. It shows 8 panels with data like tables and headings across two grid rows. Each panel has a different height. The first row has one column that is significantly shorter than the others, causing a big gap of unused space." src="https://github.com/user-attachments/assets/5962d21c-538b-42f0-8d48-196e38afbb83" /> | <img width="1170" height="762" alt="Project Wallace CSS analysis page. It shows 10 panels with data like tables and headings. Each panel has a different height and all panels are packed densely together, leading to a staggered edge at the bottom of the end of the list of panels.ge" src="https://github.com/user-attachments/assets/1a39978b-94ea-402b-995f-0d3b95167c62" /> | [see original comment]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist