Masonry Layout is Now grid-lanes

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 for making it work today . Here’s what you do need to know: it’s going to be display: grid-lanes . The earliest talks concerning masonry began in 2017 when Rachel Andrew expressed some concerns about how to make a Pinterest masonry layout . Rachel said it felt like the right approach should be a flexbox kind of thing, but this wasn’t fully achievable with flexbox, as items would rather flow from top-to-bottom rather than across each row: Currently the closest you can get with CSS to this type of layout is to use multi-col however, the items then flow top to bottom rather than across the rows. This feels more like a behaviour of flexbox than grid, as the solution is very much based on the size of the items. Opening this in order to record the feature request/use case for future discussion. And so, the talks surrounding masonry layout in CSS began within the W3C. In that same GitHub thread, you’ll read that Tab Atkins-Bittner shared a “hacky” way to go about it with CSS Grid. You can have Grid do Masonry if you know the heights of the items ahead of time. It’s a bit hacky, but you set the grid container to grid: auto-flow dense 1px / <column widths here>; , then set each item to grid-row: span <pixel height as integer>; (for example, if the item is 50px tall, 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 for beginners to use. And no, unfortunately, we cannot use grid-template-rows or grid-template-columns , as Nate Green suggested in the same thread: .figure-list { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: flow; } There’s no “simple” way to adapt Grid into Masonry - anything would involve non-trivial edits to the layout algorithm. Packery, in particular, really needs things to have a defined width. Okay, that’s fine. I’m sure you’d be thinking as well, “why not create a new display property for it?” Well, Rachel added that: The thing is we can’t create a brand new value of display for every distinct design pattern. Mind you, all these discussions were happening as far back as 2017, meaning masonry has been an elusive goal for quite some time. Just to make sure you’re with me, this is an example image of the kind of layout masonry looks like (thanks to Michael Richins for this ): One thing I would like is that prior to the announcement of masonry display type, there were solutions/hacks discussed, like this one from Andy Barefoot , but nothing truly was decided as the main go-to feature for CSS masonry. Hey, there was even...

Preview: ~500 words