[css-grid-3] Renaming `masonry` keyword

[fantasai]

Just overheard a conversation suggesting that maybe masonry isn't the word we want, so opening an issue to track that suggestion. Maybe pack? Open to ideas, if we find one we like we can consider renaming it...

[yisibl]

Can you explain why you use pack? For Chinese developers, you are more familiar with the term Waterfall Layout, which is used on the front page of many Apps.

https://github.com/topics/waterfall-layout

[fantasai]

I suggested "pack" because you're packing things into the grid as tightly as possible in that axis, instead of creating grid rows.

Waterfall is a lovely name, and a better analogy than masonry imho!

[bkardell]

fwiw, I have only ever heard this referred to as masonry layout, and using the same topics measure that @yisibl provided, there are 151 repos on the masonry-layout topic vs the 28 for waterfall, kind of confirming to me that that is a more widely understood term... So, why not use it? Where did you overhear the conversation @fantasai and what about it should it cause us to change? I'm sure there's a reason, it's just not clear from the issue what it is.

[yisibl]

For non-native English speakers, masonry may seem a bit difficult to understand.

[jfkthame]

To my mind, the waterfall name would only be appropriate if used in the vertical axis. For the horizontal version (e.g. like I see in Google image search results), masonry is a better analogy.

[SelenIT]

The eponymous JS library by @desandro is being presented as "Cascading grid library", which is somewhat related to watefall metaphor too. But it seems to me that "masonry" already became a common name for that type of layout, for many non-native English speakers as well (for example, in the Russian-speaking community the word "masonry" is most often used without translation as none of the possible translations became prevalent).

[desandro]

I'd recommend sticking with masonry as its been used since 2009, so its an established convention, not just with my library, but many other approaches and techniques.

[yisibl]

Let's finalize the naming as soon as possible, Safari seems to have shipped. https://github.com/WebKit/WebKit/pull/24414

cc @nt1m

[fantasai]

@yisibl Safari hasn't shipped yet, let's not panic. :)

[fantasai]

@jensimmons points out that none would have been a very nice keyword for this purpose. Unfortunately it's the current initial value!

[jensimmons]

The longer I look into this, the more convinced I am that we can let go of the idea of "masonry layout" and instead embrace this framing:

• CSS Grid currently lines things up in both columns and rows
• Thousands of years of graphic design have used grids, but for most of that time, "grid" = columnar grid. Where things lined up in columns, but not in rows. The idea that rows should line up too is very modernist.
• grid-temple-rows: off is what "masonry" is doing. It's turning off lining things up in the row direction.

Like Elika said, none would be a great way to express this. Rows? None. But since none already means no explicit rows (only implicit, please), we cannot use none.

"Off" may not be the best word, but that's what I'm using at the moment. Please turn off the functionality that creates rows.

[potch]

Would there be value in re-using the dense keyword (as used in the -auto-flow properties), or would that cause confusion? It has a similar meaning in terms of intention to the auto-flow situation (fill gaps please), and is semantically similar to pack. Otherwise, off or some other version of "no rows" makes sense.

[chrisarmstrong]

I don’t mind masonry, as it has become a fairly established term in the industry (we use terms like leading even though we’re not working with metal type anymore).

However, if we were wanting a different metaphor that might be more universally recognisable, I'd suggest Tetris, as the layout logic (especially with multi column elements) resembles the stacking behaviour of one of the most famous video games of all time (though upside down, to be fair).

That said, I can also see the logic in ditching the metaphor and going with something more generic like auto-flow, stack or pack... but I bet all the articles explaining how to use it will still be titled “Here’s how you create a Pinterest-style Masonry layout” or similar.

[oscarotero]

I think grid-template-rows: none is confusing, because it seems that no rows are created, but they are. The only difference is they are not aligned each other through all columns. In fact, row-gap is used to separate the elements vertically, so it's contradictory to indicate that there's no rows, but we apply a gap to separate them.

I think the keyword should reflect the idea of the rows, or columns are not aligned each other. For example grid-template-rows: no-align as opposed to align (the default behavior).

I'm thinking of this keyword as an initial setting, like inset is for box-shadow (inset configures the type of the shadow, but you have to configure the offset, size, color, etc).

For example, it could be possible to customize the size of the items:

grid-template-rows: no-align;

/* Which is equivalent to: */
grid-template-rows: no-align repeat(auto-fill, auto);

/* To strech the elements so they are also aligned at the end */
grid-template-rows: no-align repeat(auto-fill, minmax(auto, 1fr));

This idea of configuring the size of the items can be implemented in the future if it's too complex. For now, simply no-align is enough and cover most cases. And it leaves the door opened just in case we want to introduce more options in the future for fine tuning.

[rianmurnen]

“Masonry” has such a rigid meaning—set a brick in place and it stays put. It's a print-media mindset. I also think "masonry" would hamper adoption because of the legacy perception that strongly connects the word to the grid of images use case.

Like masonry, “waterfall” is another metaphor. I think it would be better to use a term that declares a state rather than a metaphor.

The underlying concept of waterfall is flow. “Flow” has established meaning in CSS so perhaps troublesome to use this way, but grid-template-rows: flow feels appropriately descriptive. It explains that a behavior is happening more so than off.

[TarryDan]

this really isn’t about the layout used by Pinterest or other similar sites. This is a mechanism for telling the browser, “please create a grid, but without any rows.”

I was dubious about how masonry was even conceptually a kind of grid, but this quote from the article on webkit was useful in seeing the gridness of it. So:

grid-template-rows: no-rows

Very explicit, no ambiguity or metaphor which might feel complex internationally, and no associations with what a masonry layout is 'for'. It's some kind of grid, but you turn the rows off. It's also less ambiguous than off or none (what is being turned off? of what is there none?), and it also resolves some of the discomfort around grid for me. 'a grid, with no rows'

The idea of using no-align because rows are in fact created is a good point, but just in terms of what feels intuitive to me, what I would expect to happen when I choose no-rows would look like masonry. no-align, I associate align with text-align and align-items, moving objects around in a space. By implication, no-align suggests there should be a value align, but there's not - the opposite is rules for rows, which aren't exactly alignment IMO. The pair 'rows like this' and 'no rows' feel more clear.

& because the rows here aren't really behaving like rows - it's more of a kind of margin-between that can nevertheless be targeted as if they were rows. We wouldn't conceptualise a column of blog posts filling the whole span as 'each post is a row' or, a single plate on a shelf as 'a row of plates' in other contexts - a row implicitly has two or more objects in it, or a row is a horizontal relationship between things.

(no-snap? rows are present between objects, but objects don't snap to them - instead, the rows follow where the objects are. I like this less.)

There's also the way that align is used of vertical orientations in various contexts. Hopefully, masonry will be available for both rows and columns. It's a bit messy the way the orientation 'align' targets changes depending on how you're flexing. no-rows and no-columns are a clear pair, where 'align' makes me think 'aligning to what and in which direction'?

[rachelandrew]

Commenting here as this is where the community conversation has been directed to, but I still have concerns with the idea of bundling Masonry in with grid. We'll have to account for masonry things in any future additions to grid, and there will be parts of grid that don't make sense in masonry and therefore need explaining as to why they don't work. Given that things like gaps and alignment are already dealt with in other specifications, and there's no reason not to re-use the various methods of sizing columns from grid, having a display: masonry (or display: waterfall or whatever) makes a lot of sense. Then masonry can be specified with just the things developers need, not having to include things they don't because that's how grid behaves. There's an alternate proposal in https://github.com/w3c/csswg-drafts/issues/9041.

I'd also love to see Masonry (via any version of the spec) landed alongside reading-order-items. There's a strong possibility of disconnected source vs reading order when using masonry type layouts. There is discussion in https://github.com/w3c/csswg-drafts/issues/5675 about the problems, specifically related to masonry layouts. I think the reading-order-items proposal currently being specced here provides a route to a solution, and it would be great to be able to provide that alongside masonry.

[oscarotero]

After seeing the proposal of a different display value for masonry-style grid, I understand better the reasons of move it out of display: grid. Some properties like grid-template-areas make no sense for masonry, and other properties like masonry-auto-flow, justify-tracks and align-tracks were created only for masonry.

So I think a display: whatever is a cleaner solution.

[taksyon]

Heres some brainstorming:

Bricks Tiles Chasm Collage Mosaic Cells Waterfall Quilt << I like this Interlock Canopy Hive Chain Reef Hexis Shard

[chriswales95]

I quite like tiles display: tile.

Brick is also good display: brick.

Both are easy to type and are pretty basic and easy to understand. You can visualise both clearly and it's easy to understand what the intended result should be.

[ehvana]

I suggest: grid-template-rows: fluid

[kbrilla]

Please, mayby create an questionnaire like with nesting, to gather more votes on the matter.

[sfinevelir]

compact, perhaps? In particular, if the final approach is part of grid-template-rows, compact would, ideally, imply that the rows are compacted as opposed to retaining a "rigid" vertical structure.

Either way, 👍 for renaming masonry to something less metaphorical!

[theinfinit]

For the argument against display: brick, or masonry, I will post this inspiring brick wall here to remind us, that masons, set the CSS of walls to grid-template-columns: "OFF", but grid-template-rows to masonry. Which is, the opposite of the proposed masonry layout :)

[NetOpWibby]

Any of fluid, off, or waterfall sound great to me. brick seems silly, especially because the masonry is horizontal, not vertical. Makes me think of being in the Matrix wall-running sideways...THEN it'd make sense.

[vintagedave]

row: off combined with having row: none is potentially confusing because you have two 'no' options, both with different meanings. This kind of ambiguity is something I recommend avoiding.

Instead of specifying by what it is not, can we specify by what it is: columns-only, column-flow, or similar?

[vintagedave]

As a second idea, may I suggest newspaper? Column-based filled layouts are familiar to many people from newspapers or magazines, and web design that uses row:off, waterfall, etc layout often mimics design used for physical newspapers or magazines.

An example of the New York Times (note column spanning, as in the Safari masonry layout). I am not expert on non-Latin languages, but I found this interesting article on Thai press typography with an image demonstrating similar layout in a Thai magazine on the right hand side. I would tentatively say, and I note my lack of knowledge, that the concept of this layout coming from press media is likely fairly worldwide.

[ar-nelson]

I like grid-template-rows: fluid or grid-template-rows: no-align. Some other ideas that could work:

• grid-template-rows: free
• grid-template-rows: freeform
• grid-template-rows: floating
• grid-template-rows: sliding

I actually really like that last one; "sliding rows" or "sliding columns" communicates the appearance of a masonry layout pretty well. Only problem is that when I think "sliding rows" I think of the image of a brick wall a few replies up, which is what you'd get from grid-template-columns: sliding instead.

[frivoal]

As a value of grid-template-rows (or …-columns), I'd say collapse could make a fair bit of sense. That doesn't work as a distinct display type though.

[taksyon]

For the argument against display: brick, or masonry, I will post this inspiring brick wall here to remind us, that masons, set the CSS of walls to grid-template-columns: "OFF", but grid-template-rows to masonry. Which is, the opposite of the proposed masonry layout :)

I was actually staring at a brick wall in front of me after I added that to the list, thinking "I definitely shouldnt include this" 😂

I would like to officially change that suggestion to "brick-wall-but-instead-its-sideways" 🤣

[taksyon]

Heres some more:

Lattice Matrix Gridline Cascade Stack # like display: stack

[chrisarmstrong]

I’m really liking @desandro's suggestion of grid-template-rows: collapse.

Of all the non-metaphor suggestions it feels the clearest.

[tubbo]

Came here to post about grid-template-rows: collapse, but it seems others have already suggested it :)

[brandonmcconnell]

@chrisarmstrong Where did @desandro suggest collapse? I only see his suggestion of masonry.

I agree, though— that either masonry (for recognizability) or collapse would make the most sense.

I'm personally in favor of collapse, as it's a common term in CSS with a related purpose (collapsing borders, collapsing cells, etc.)

---

The only gotcha to consider is if some people think of collapse in terms of "hiding," as using visibility: collapse is often used to hide elements. In that case, would users think collapse would actually collapse an entire row. So I could see someone trying to do something like grid-template-rows: auto auto collapse auto.

I'm not sure that's a serious issue though; it's a new feature, and like any feature, users will learn how it works.

[rileybathurst]

masonry feels to rigid for something this adaptable when looking at the pictures of the brick wall and the demos, maybe something you would have as specific layout used not the entire idea

waterfalls are notoriously hard to control and breaks the metaphor used horizontally

so then a non-metaphor where fluid or collapse are easier for me to differentiate than off which is too close to none. fluid is nicer so to me that's best at least so far

[dgattey]

fluid and no-align make the most sense as a non-loaded metaphor. no-align is best, because it accurately describes that there's no attempt to make rows line up, they just flow however the content dictates. But fluid gives a very similar metaphor. collapse is too overloaded with table borders and hiding elements

[JoshMLeslie]

i.m.o.

As others have suggested, masonry doesn't make sense semantically since bricks etc are laid horizontally. The argument of "it's what has been used" has never been a good reason to me; should we still be using wooden wheels on cars? Horses instead of motors? I'd like to suggest / support the implementation of display: waterfall;. Entirely separating concerns from display: grid;. Would you have added grid as a subset of flex? Making a new display namespace leaves it less brittle to updates / gives room for expansion, resolves having to fight with collapse / off / none / reserved keys (under grid), and strips out any irrelevant grid-specific handling. While waterfall may inherit significantly from grid in the short term, we should endeavor to make it as flexible as possible when introducing a new organizational concept to the namespace. Undoubtedly it will grow and evolve in ways we cannot imagine as future maintainers carry on.

[jensimmons]

I don't think any of these are it, but I'm wondering if there's something in this direction:

• grid-template-rows: disband
• grid-template-rows: disjoin
• grid-template-rows: disperse
• grid-template-rows: disintegrate
• grid-template-rows: separate

[brandonmcconnell]

As others have suggested, masonry doesn't make sense semantically since bricks etc are laid horizontally

fwiw bricks can be laid horizontally or vertically:

Horizontally	Vertically
Source: https://architizer.com/blog/practice/details/technical-details-setting-out-brickwork/	Source: https://www.archdaily.com/873185/brick-house-in-brick-garden-jan-proksa

In the realm of masonry, this is purely done stylistically. The same would apply to CSS:

Horizontally	Vertically
Source: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/	Source: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

If I understand correctly, these would both be supported by the proposed masonry layout:

.masonry {
  display: grid;
  &.vertical {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: masonry;
    grid-auto-flow: column;
  }
  &.horizontal {
    grid-template-rows: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-columns: masonry;
    grid-auto-flow: row;
  }
}

That said, I'm all for picking a better word if we can think of one, but I don't think we should completely disqualify masonry either, especially since it holds the bulk of prior art.

[brandonmcconnell]

• grid-template-rows: disband
• grid-template-rows: disjoin
• grid-template-rows: disperse

@jensimmons I like the direction of these. The proposal for collapse was pretty key in my mind, and I think these could be some prime contenders as well.

[zaygraveyard]

• grid-template-rows: disband
• grid-template-rows: disjoin
• grid-template-rows: disperse
• grid-template-rows: disintegrate

@jensimmons As a non-native English speaker, these are hard to remember/type correctly 😰, and I found grid-template-rows: separate better (language wise).

And at first, I thought this rule would result in a horizontal "masonry" (as in, treat rows "separately" or as "disjoint"). But late I realized they were meant as equivalent to off (as in, rows should be "disintegrated").

The more I think about it, the more I like grid-template-rows: off, it feels really clear (to me at least 😅).

[chrisarmstrong]

If we’re going for a synonym of “off”, how about grid-template-rows: disable? I’m guessing it’s a common enough word in coding contexts for non-English speakers to be familiar with?

(I still prefer collapse though).

[zaygraveyard]

grid-template-rows: disable works too, but I still prefer off because I see "disable" as indicating that something is there but cannot be interacted with (like a disabled button or input field). Again I'm just explaining how I understand the terms, and I'm fully aware that it might not apply to everyone 😅.

[KieranP]

IIRC, display takes multiple values. So how about something like this?

display: grid balance;

• Saves having to worry about what to set for grid-template-rows
• Balance I feel describes what is it trying to achieve (balance items across the grid)

[brandonmcconnell]

@KieranP How would you use that for different axes— a masonry layout across the x-axis vs. y-axis?

[tabatkins]

IIRC, display takes multiple values. So how about something like this?

The multiple values are for display "inside" (how it formats its children) and "outside" (how it relates to its parent); masonry and grid are both "inside" values.

[ricktheartist]

The longer I look into this, the more convinced I am that we can let go of the idea of "masonry layout" and instead embrace this framing:

* CSS Grid currently lines things up in both columns and rows

* Thousands of years of graphic design have used grids, but for most of that time, "grid" = columnar grid. Where things lined up in columns, but not in rows. The idea that rows should line up too is very modernist.

* `grid-temple-rows: off` is what "masonry" is doing. It's turning off lining things up in the row direction.

Like Elika said, none would be a great way to express this. Rows? None. But since none already means no explicit rows (only implicit, please), we cannot use none.

"Off" may not be the best word, but that's what I'm using at the moment. Please turn off the functionality that creates rows.

I like the idea of "off" but in reality the rows are not off, but instead the child elements are controlling the "rows" so perhaps the word "defer" might be a bit more accurate?

[jfkthame]

grid-template-rows: unaligned? Arguably each column is still divided into "rows", but they're not required to align with each other across columns like in a normal (two-axis) grid.

(Or grid-template-columns: unaligned for the horizontal-masonry version, obviously.)

[DeepDoge]

I think we might still be able to use align-content or justify-content. For example:

grid-template-rows: off/fluid/dense/etc
align-content: center

This would align the content at the center, so everything would fall to center. So unaligned or no-align would sound weird.

[shsteimer]

grid-template-rows: unaligned? Arguably each column is still divided into "rows", but they're not required to align with each other across columns like in a normal (two-axis) grid.

(Or grid-template-columns: unaligned for the horizontal-masonry version, obviously.)

This aligns well with my mental model of this type of grid as well. Commenting to suggest considering something like grid-template-rows: jagged

There are rows, but the rows are not forced to align and columns can have different numbers of rows within, as in a jagged array. https://en.wikipedia.org/wiki/Jagged_array