We’ve discussed Masonry layout extensively on CSS-Tricks, so there’s no need to revisit debates on how to approach it, its potential as a unifying layout concept, or alternative methods for implementation.
Here’s the key takeaway: it will be `display: grid-lanes`.
The earliest discussions on masonry began in 2017 when Rachel Andrew raised concerns about creating a Pinterest-style masonry layout. She suggested it should resemble a flexbox approach, but it wasn’t fully achievable with flexbox as items flowed top-to-bottom rather than across rows.
Currently, the closest you can get with CSS is using `multi-col`, but items flow top to bottom rather than across rows. This feels more like a flexbox behavior than grid, as the solution is based on item size. This was noted for future discussion.
The W3C began discussions on masonry layout in CSS. In the same GitHub thread, Tab Atkins-Bittner shared a “hacky” way to achieve it with CSS Grid.
You can have Grid do Masonry if you know item heights in advance. It’s a bit hacky, but you set the grid container to `grid: auto-flow dense 1px /
I appreciate clever CSS hacks, but I also value a working CSS solution that’s beginner-friendly. Unfortunately, we can’t use `grid-template-rows` or `grid-template-columns`, as Nate Green suggested:
“`css
.figure-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: flow;
}
“`
Atkins-Bittner replied:
There’s no “simple” way to adapt Grid into Masonry – it would involve non-trivial edits to the layout algorithm. Packery, in particular, needs defined widths.
I’m sure you’re thinking, “why not create a new `display` property for it?” Rachel added:
We can’t create a brand new display value for every distinct design pattern.
These discussions date back to 2017, making masonry an elusive goal.
Here’s an example image of what a masonry layout looks like.
Before the masonry display type announcement, solutions/hacks were discussed, like this one from Andy Barefoot, but nothing was decided as the main CSS masonry feature. There was even a cool Masonry library from David DeSandro, who gave useful advice to W3C and browser vendors on writing the spec and implementing the masonry layout, like image loading, multi-column spanning items, filling gaps, and retaining horizontal order.
Check out the Masonry.js docs for more information about the object options.
This thread helped, but it still didn’t lead to a conclusive statement about the masonry syntax. We had code suggestions, like from Dan Tonon:
“`css
.flex-container {
display: flex;
flex-direction: column;
flex-block-count: 2;
flex-block-flow: cross;
}
“`
This introduces two new flexbox properties, `flex-block-count` and `flex-block-flow`, allowing control over items similarly (with `column-count`) and controlling item flow, respectively. However, as Michael Richins pointed out:
This will still not work for children of different height…
Discussions ended in April 2020 with Nic787 referencing and agreeing with an earlier probable solution for masonry using `float` instead of grid:
I think you have a good point. Currently, float is becoming old, and flexbox allows many things, but this masonry layout is lacking in both.
Sometimes you can have many small images in a row, so making it left to right can’t work all the time. Masonry is left to right, but it’s easier for users to access information.
Fortunately, discussions continued in many threads, and requests for the masonry display property flooded W3C. Another notable GitHub thread on the masonry debate is the Masonry Syntax Debate in November 2024, but it didn’t lead to much at that point. Jen Simmons noted in the meeting:
Personally disappointed that we’re not making more progress. We’ve been having this argument for 5 years.
Five years of back and forth on naming and structure. Do we use grid? A new property? Separate properties for masonry? We couldn’t decide.
I like a comment from our own Juan Diego, stating how solutions aren’t “just use grid” or create a new property, but that we could drop the `grid-` prefix and settle for an option for both `grid` and `masonry`:
…It should be possible to use a new unprefixed `template-areas` property for masonry and grid, regardless of formatting context.
Fortunately, something good came from that thread because another meeting was held on January 31
