Masonry layout is now grid courses | CSS tricks

We’ve talked a lot about masonry layout here on CSS-Tricks, so there’s no need to remind you of the two-sided discussions about how to approach it, the idea of ​​using it as a new unifying layout concept, or alternative approaches to making it work today.

Here’s what you need to know: It’s going to happen display: grid-lanes.

The first conversations about masonry started in 2017 Rachel Andrew expressed some concerns about creating a Pinterest masonry layout. Rachel said it felt like the right approach would have to be a flexbox type thing, but this wasn’t fully feasible with flexbox, as items would rather flow from the top down rather than across each row:

Currently, the closest you can get to this type of layout is with CSS multi-col however, the items then flow from top to bottom instead of across the rows.

This feels more like flexbox behavior than grid, because the solution is heavily based on the size of the items. Open this to capture the feature request/use case for future discussion.

And so the conversations about masonry layout in CSS began within the W3C. You can read that in the same GitHub thread Atkins-Bittner tab shared a ‘hacky’ way to tackle this with CSS Grid.

You can have Grid Masonry done if you know the height of the items in advance. It’s a little hacky, but you’ve set the raster container to grid: auto-flow dense 1px / ;and then set each item to grid-row: span ; (For example, if the item is 50px high, use grid-row: span 50;).

I’m a sucker for clever CSS hacks, but you know what else I’m a sucker for? A working CSS solution that makes it easier to use for beginners. And no, unfortunately we cannot use that grid-template-rows or grid-template-columnsas Nate Green suggested in the same thread:

.figure-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: flow;
}

Atkins-Bittner responded:

There is no “easy” way to adapt Grid to Masonry – anything would involve non-trivial operations on the layout algorithm. The packaging industry in particular needs things that have a certain width.

Okay, that’s fine. I’m sure you too would be thinking, “why don’t we create new ones display property for it?” Good, Rachel added That:

The point is that we can’t create a completely new display value for every single design pattern.

Mind you, all of these discussions took place way back in 2017, meaning masonry has been an elusive goal for quite some time.

Just to make sure you agree with me, this is an example image of what the brickwork looks like (thanks Michael Richins for this):

One thing I would like is if solutions/hacks were discussed prior to the announcement of the masonry display type, like this one from Andy Barefootbut it wasn’t really decided that this would be the main feature for CSS masonry. Hey, there was even a super cool one Masonry library by David DeSandroand he gave pretty useful advice for W3C and browser vendors in writing the specifications and implementing the masonry layout, such as how image loading would work, spanning multi-column items, filling gaps, and maintaining horizontal order.

View the Masonry.js documents for more information about the object options.

This thread helped, but it still did not lead to a conclusive explanation about what the masonry syntax will look like. We even had code suggestions, like from Then Tony:

.flex-container {
  display: flex;
  flex-direction: column;
  flex-block-count: 2; 
  flex-block-flow: cross; 
}

This introduces two new flexbox properties called flex-block-count And flex-block-flow which allows us to manage items in the same way (with column-count) and manages the flow of items respectively. However, this wouldn’t fly that way said Michael Richins:

This still doesn’t work for children of different heights…

This thread didn’t go anywhere, so the discussions ended in April 2020 with a GitHub user named Nic787 references and agrees with an earlier one probably solution for masonry use float instead of a grid.

I think you have a good point. Currently, float is getting old and flexbox is a lot of options, but this masonry layout is missing in both.

… Sometimes you can have many small images in a row, so working from left to right doesn’t always work. Masonry is as always from left to right, but in a sense it is easier for the user to access information.

Fortunately, discussions still continued in many discussions, and applications for the masonry project flooded W3C. Another notable GitHub thread that came up in the masonry debate is, well, the Debate on the syntax of Freemasonry in November 2024, but that did not yield much either at that point. In reality, Jen Simmons noted this during the meeting That:

Personally disappointed that we are not making more progress. We’ve been having this discussion for five years.

Five years of back and forth about what exactly the naming and structure would be. Do we use a grid? Are we using a brand new building? Do we create separate homes just for masonry? We couldn’t really decide on that.

One thing I’m happy to support is a comment from our very own Juan Diego that explains how solutions are not “just using a grid” or creating a new featurebut that we could get rid of it grid- prefix altogether and settle for an option that suits both grid And masonry:

…it should be possible to use a new, non-prefix template-areas property for masonry and grid, regardless of layout context.

Luckily something good came out of that thread, because another meeting was held on January 31, 2025, and guess what? The decision was made to reuse grid templates and placement properties for masonry layout.

The CSS Working Group just discussed it [css-grid-3][masonry] Masonry Syntax Debateand agreed to the following: FIXED: Reuse grid templates and placement properties for masonry layout.

To wait. Why am I announcing masonry syntax properties? What about the main syntax itself? Isn’t that why we’re here? Great, you’re still with me. So let me show you the exact thread where the masonry syntax war ended.

It’s (almost) time!

This brings us to the latest announcement that setting grid-lanes on the display property activates a masonry layout.

.masonry {
  display: grid-lanes;
}

It was difficult to get here. Just determining the keyword cost year. Just now look at all the names which were considered a lead-up to grid-lanes:

• collapsed-grid or grid collapse
• grid-stack or stacked-grid
• grid-pack or packed-grid or grid pack
• compact-grid or compact grid
• grid-masonry or masonry-grid
• grid-flex or flex-grid
• grid single-axis (masonry grid) vs. grid dual-axis (normal grid)
• grid stack (masonry grid) vs. grid grid (normal grid)
• staggered-grid or grid staggered
• uneven-grid
• semi-grid
• lane-grid or grid-lanes
• axial-grid

I wouldn’t have minded staggered-grid because that’s what it is in React Native. In fact: Kevin Powell agreed. That said, I’m completely okay with it grid-lanes. It will take some time for browsers to implement this as discussions surrounding the Shorthand adjustments for masonry are still ongoingwhile not much has been said about the issue.

What about the article flow?

Oh yeah, remember that? Are still in the makingand I expect we’ll see after a while grid-lanes implementation is starting to make the rounds. There’s a nice hypothetical example from Fantasai to illustrate what it could look like if added to the specification today:

item-flow:  ||  ||  || 

/* shorthand for */
item-direction: row | column | row-reverse | column-reverse
item-wrap: wrap | wrap-reverse
item-pack: normal | dense || collapse
item-slack: 

In use it would look something like this:

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  item-flow: collapse; /* == item-flow: row collapse 1em; */
  gap: 1rem;
}

So, what’s next?

After much walking back and forth, masonry grid-lanes is here! But where exactly?

Well, this is the tricky part. The truth is that we still have to wait for browsers to be implemented grid-lanes. How long can it take? I really can’t say, but keep in mind that all major browsers have already implemented some sort of masonry layout behind flags or previews, but with different syntax:

So good news all around! All that remains is to wait. If you want to follow grid-lanes progress, here’s a good one link pool for each browser by Patrick Brosset. And if you can’t wait for the official masonry implementation, Zell Liew has an approach to using it today, with minimal JavaScript.