Idriss Douiri 
The Masonry grid layout (also known as the “Pinterest Layout”) is a popular design system, and one of my favorite layout patterns is now finally possible in pure CSS using the new display: grid-lanes value (which is not supported yet).
This makes it easier to create these beautiful designs without compromising accessibility or breaking the logical reading order of items.
.masonry-container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}What is a Masonry Grid Layout
The “Masonry” name was inspired by the traditional building method of fitting stones of varying sizes together to form a solid wall.
The new grid-lanes feature acts as a hybrid of Flexbox and Grid. It works by defining strict lanes where items flow freely into the next available space, eliminating the uneven vertical gaps typical of standard grids.
Life before grid-lanes required using CSS hacks, such as Multi-column layout, custom JavaScript for dynamic calculations, or the use of a pre-written library like masonry-layout.
Do Grid-Lanes Only Flow in one direction?
No. Since grid-lanes builds on core Grid concepts, the browser automatically determines the flow direction based on your track definitions. If you use grid-template-columns, items flow vertically; if you use grid-template-rows, they flow horizontally.
You can also explicitly control the placement logic (Still not confirmed how).
Masonry Grid Layout Use Cases
While the “Pinterest style” image gallery is the most famous example, Masonry is useful anywhere content height varies. It creates a dense, polished look for mega menus, multi-column footer links, and blog post listings, where varying title lengths or summaries would otherwise create unsightly gaps.
Other use cases may contain:
- Dashboard widgets
- Testimonials
- Product catalog
