w3c
[css-grid-3] Renaming `masonry` keyword
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...
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
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!
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.
For non-native English speakers, masonry may seem a bit difficult to understand.
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.
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).
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.
Let's finalize the naming as soon as possible, Safari seems to have shipped. https://github.com/WebKit/WebKit/pull/24414
cc @nt1m
@jensimmons points out that none would have been a very nice keyword for this purpose. Unfortunately it's the current initial value!
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: offis 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.
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.
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.
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.
“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.
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'?
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.
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.
Heres some brainstorming:
Bricks Tiles Chasm Collage Mosaic Cells Waterfall Quilt << I like this Interlock Canopy Hive Chain Reef Hexis Shard
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.
Please, mayby create an questionnaire like with nesting, to gather more votes on the matter.
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!
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 :)
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.
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?
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.
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.
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.
For the argument against
display: brick, ormasonry, I will post this inspiring brick wall here to remind us, that masons, set the CSS of walls togrid-template-columns: "OFF", butgrid-template-rowstomasonry. Which is, the opposite of the proposedmasonrylayout :)
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" 🤣