What would you call this layout?

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:35 - They want our help!
01:35 - What do we mean by masonry?
03:32 - The questions that need answering
06:02 - The current spec
09:06 - Should it be a part of grid or a new display value?
16:14 - What they want from us
18:16 - What should it be called?

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[ankers]

Kevin, I really like this format of you reacting to and talking over your thoughts on articles. If you like doing this content, you should definitely do more of it

[KevinPowell]

What do you think? Should this be something we can do with CSS? And if so, what approach makes the most sense to you? Maybe it's something that isn't even being talked about as an option right now!

[ThatRobHuman]

There's an article on the chrome dev-blog that showcases the rational of the "other side" (ie: keeping it a separate display). I think I'm in favour a separate display value. I don't think doing so would preclude browsers from re-using relevant implementation details, but from a consumer standpoint, I think the fact that only a subset of grid-* properties are usable while in "masonry mode" is a strong signal that it might be better off being it's own display.

[andreasnulein]

+1 for `display: grid, grid-template-rows: masonry`

[hoshi]

I love "rows:off;" because then we can make this work horizontally with "columns:off;"

[KawazoeMasahiro]

I do agree it should be part of grid. The main reason is that you can already kinda do this, with an insane performance impact, by using a dense grid with 1px tall rows and elements spanning the correct amount of rows for their height. This feels semantically similar, which gives it a good place within the grid spec. Combined with the rows off naming, it completely dodges the naming issue, which is great.

[emp]

This is useful even for very simple applications without images.
e.g, at my work we built a responsive one or two column grid of form fields, but because the form fields are not all the same height (e.g., some form fields consist of multiple 'sub fields' underneath), css grid generates extra empty space to align the fields neatly along rows. We need to keep forms compact, so we don't want this extra space, and afaik the only chrome-supported way to fix this is to add negative margins to sort of 'break the grid' and hide the extra space with judicious z-indexing. This results in a small but tedious chunk of magic-number-filled css that makes the grid 'compact'. OTOH, testing with grid-template-rows: masonry on safari just auto-magically works without any additional css... wish we could have made use of that!

Also, just for the sake of adding another suggestion for consideration (though I'm still leaning for display: masonry): the comment about the 1-dimensional nature of masonry made me think that this could be implemented inside `display: flex` under property `flex-template: 1fr 2fr 1fr` (e.g.). This property could determine the size of wrapped columns in the cross-axis direction.

[gabrielhartley]

I'm not deeply enough into the details to say anything substantial about the issues you brilliantly lay out here; but I do want to say two things off the bat: one, I love your YouTube editing style here in which you leave in (demonstrate) your own moments of pauses and thinkings (thoughtful yet tentative considerations) as part of the presentation here without the need to edit it out into some prematurely-finished and authoritative statement; and two, I had been searching for any word from Jen Simmons off and on since she left Firefox Grid way back when—I knew she had gone to Safari but I hadn't yet stumbled upon her later and current statements on Grid. I'm so glad to see both of you at work here (even if only tangentially). I also remember Wes Bos doing a video about five years ago on his magical use of javascript to create what I think is exactly what you are talking about here (except, of course, via javascript rather than "pure" CSS Grid—"CSS GRID: Image Gallery Exercise — 20 of 25"). Thanks for your videos, Kevin.

[smaza]

it's kind of grid-y, and kind of flex-y... they should call it "display: flexgrid" and add it to the css mistakes list pre-emptively 😊

[feldinho]

One disadvantage of having masonry and grid being the same display type is that a feature that is harder to implement in one could block development in the other. For example, imagine styling guides is tricky to implement on masonry, that could delay its implementation on classic grid.

About the grid-template-rows, that could easily be renamed to template-rows to make it more general. The same already happened for grid-gap, that was replaced by the more general gap, that works on flex and grid.

[tobiasalexander]

Given the impact of changing one element to force a complete reflow of every other item within the grid, a good name might be "grid-template-rows: cascade;" It also has synergy with the waterfall idea.

[Ufphotography]

Masonry layouts combined with a native lightbox that is customizable would be my dream. Up until now I always have to rely on third party plugins for these things which is annoying and unnecessarily bloats wordpress. Thanks so much for being part of this team and working on stuff like that to make CSS easier and more functional! I really enjoy your content and have learned a bunch from it!

[conceptrat]

The extra thinking when you're were explaining grid vs flexbox goes with my thoughts that grid should be something possible using flexbox and drop grid. Then masonry becomes a definition within flexbox and flexbox then fulfills it's purpose, to provide a flexible box/block layout.

[Bughi]

I literally did something like this yesterday. ( Most likely very un-optimal -- but nonetheless it works-ish ). Support for something like this would be amazing and i think it would help developers save time in answering the question: "Why does something like this take so long to build? I made it in "insert favourite design platform here" in 10 minutes". I'm really curious if this will get implemented .

Thank you @KevinPowel for sharing this.

[FlorimonR]

Great news ! Love the ideas of names and reasons behind❤

[basiccoder]

Thanks Kevin I was the one who requested this video a few months ago in the discord, I'm the one who created nasa clone, I learned way more from this video that I didn't knew Thank you

[justingolden]

As someone who has written CSS for a decade, but also as someone who is a simpleton and is far from perfect at flex and grid, I like the idea of setting `display` to either `flex`, `grid`, or `masonry` and still using common properties like `gap` etc. This sounds simplest and most intuitive to me. It's like you have a 1d layout, a 2d layout, or a masonry 1d layout. It's intuitive given you understand flex/grid, which aren't going away and will be taught regardless.

As for naming, between masonry and waterfall, I prefer masonry, which I think is more common, but we should do not whatever is most common now, but what is most logical for the long term, since this will exist for decades. People will be googling this millions of times and writing it millions of times, so we should think of other languages, cultures, semantic overlap, etc. and get something intuitive and simple for the most people.

[kushaagr]

When people were excited for container queries and subgrid, I was getting excited for Masonry layout. This is the one feature I still want till today! 🫰🤞

Just image dropping lot of pictures, turn lazy loading on, and with one line of CSS the layout looks professional.

No performance considerations, no thinking required for layout planning.

[mahadevovnl]

I don't think it needs to be a grid at all, because it's not a grid. It's a flexible type of boxes, one might call it a "flex box"! It's a new type of flow from left to right. The first row would have elements that are different heights, and the next row would be the same... but then there are gaps. So instead of `align-items: center;` I would prefer `align-items: compress;` of sorts. Let the next row of items, each item individually, move up to its element above it, taking into account `gap` and `margin` and such.

What if the first "column" (it's not a grid after all) only has tall items? Well, sucks. It means one column will be larger because items will still go from left to right in their respective rows, they'll just skooch up to the element above them.

So it would be: display flex, align items compress, flex-wrap, and only work with block or inline-block children.

[hack_nug]

1. waterfall is more idiomatic for css (cascade, flow layout...).
2. yes to this being part of css grid (hopefully this will remove the 999 rows limit if that's still a thing).
3. of course. anything clients design with this particular layout in mind.
4. only the regular stuff built with masonry.js and similar libraries. i did write my own implementation years ago though, and explored using multi-column, flexbox, and grid to avoid the js overhead when resizing the window and all that. iirc i ended up settling for having multiple copies of the items and pre-calculating positions for each of my breakpoints using the image size from my cms (maybe i did deduplicate the elements somehow but i can't recall, my focus was on preventing jumpy elements on resize and having the correct layout show instantly to the user). please note i wasn't using this layout for arbitrary content, only images.
5. we should be able to use this for horizontal layouts without resorting to `writing-mode` or similar properties. turning off columns or rows would allow for this so perhaps

if this gets implemented outside of the grid spec, i think `grid-template-<column|row>` should be renamed to `template-<column|row>` just like we did for `gap`