What should the new masonry syntax be called?
The CSS Working Group has resolved to add a new display type for what we've been calling masonry, but it will not be
display: masonry.
I plan to submit a comment on the issue (which you can find here, but I'm curious what others think about it as well.
One thing they have agreed on is the word "grid" should be be included in the name, and at this point I believe there is no fighting that (I also think it's a good call for a few reasons, but I won't worry about those yet).
When they first resolved it, it sounded like it would be display: *-grid or display: grid-*, but the other day, it was mentioned that they're also willing to consider having it multiple values instead, so display: grid pack or display: grid single-axis, etc...
I'd love to know how people feel about this, and what names they think it should use, so... what do you think?47 Replies
Also, don't limit to replying here. If you have strong opinions on this, you should share them there (other than they should go with
display: masonry, because that's off the table now).
Looking to just get some quick vibe checks from people on this if you aren't going to take the time to comment there.Maybe
offset-grid or grid offset to highlight the fact that it's not an actual aligned grid?
Or, of course masonry-grid 😄I liked the item-flow that Jen Simons proposed
item-flow is happening, but it's part of the new unified layout thing they are doing, which masonry will be a part of.
The communication around this has been a bit confusing imo, because they've been talking about them together so much.
Part of the reason it happened was because with all the talk of masonry, one of the W3C groups was like "wait, this is going to add more complexity... can we unify some of these layout concepts?!" - and so they started doing that, while also looking at how it'll work with masonry, and ideas of how it would fit in... some of which would probably still apply.
With item flow, we'll be able to do this:
In her perposal for it,
item-flow was a shorthand for all the options we have, so we could do a :
Obviously, though, it means the idea of collapse sort of goes out the window like she proposed.What was the idea of collapse?
I have something for
irregular-grid but I feel like it doesn't fit the vibe of other css keywords
Maybe grid stack could work...My main issue with the two key words is I feel like they're doing too much???
Like, they don't want to do make masonry part of grid, but
grid something is okay? It's still becoming a subset of grid at that point???
Most people don't know we have two keyword syntax for display right now, with inline grid ... now we could have three? display: inline grid stack? What happens if someone does display: inline flex stack? or display: list-item grid?Do they have an idea of how the columns etc are going to be set up with masonry? Because it seems like using the existing grid syntax makes the most sense 🤔
I also have mixed feelings about the multi word syntax for the display prop...
loose-grid could be a nice keyword for it though... It has the grid bit, hints at it not being ortho-linear without being too negative or implying any directionality directly.I wasn't in the meeting, so I'm not sure if it's on purpose, but I believe because they are including
grid in the name, we'll still be using grid-template-columns and grid-template-rows to set everything up.
there are pretty valid reasons for not wanting it to be a subset of grid though, as there are a whole set of things that won't work, and new things that will be possible
if it wasn't so wordy, I'd be down for a grid-single-axis... I like it as a two value there grid single-axis, but it's pretty terrible otherwise, lol.
Really starting to wish grid-auto-flow wasn't a thing, cause I still think grid-flow makes a lot of sense for this 😄I don't know... I feel like flow isn't really a good description of the thing
It's too vague
I feel like using
masonry somewhere is perfect considering everyone knows what it isThe problem is a lot of people don't know what it is. It's common enough, but some parts of the world call that a waterfall layout, not masonry, and in general non-native English speakers don't get it. Granted, once you learn it, it's not so bad.
I think the other issue is it will do more than what we think of as a traditional masonry layout. It opens up several new patterns.
Plus I think at this point it's dead anyway, so unless there is a huge swell of support for going back to that (maybe a grid-masonry?) then it's not where things are going to go.
It's still something I see a lot of people asking how to achieve. But I guess it is something quite specific.
What about
display: grid-but-look-here-is-how-it-works-you-define-one-axis-that-is-actually-a-grid-and-the-other-axis-flows-off-grid-really-nice-so-you-can-make-cool-layoutsDefinitely has a certain ring to it 😄
Other ideas would be grid stack or grid shelf. Sort of trying to find simple analogies. A bookshelf is really similar to masonry, just rotated
grid-flex ... just to confuse the newbiesI mean it sort of is that in a way, lol.
What about bricks
We all know bricks. I think that's pretty intuitive
I think the reason they dropped masonry would lead to that being rejected too
I think including "pack" somehow would be a good solution. The problem of fitting as many shapes into a given space with as little spare room as possible is called a "packing problem". GIven that is what we're talking about here, minimizing whitespace by shifting items around so they fit together better, I think
grid-pack or grid-packing would be appropriateSomeone just recommended
staggered-grid today, and I'm all on board with that.
apparently that's what they use in React Nativestaggered grid implies a quinquonce formation... massonry is different
Quincunx in english... 'parently
does it? I don't think of that as staggered 🤔
I just want for the CSSWG to decide on something. 😅
At one point, they'll just have to pick something. The longer this conversation goes on, the more it's clear that everyone has different opinions on why different terms are bad.
one of the pushbacks on staggered so far was that it's hard to spell for non-english speakers, and that non-english speakers don't know what that means...
The same thing has been used for why people don't want to use
masonry as well.
Do non-english speakers know what isolation means? Or translate in the context of moving something? Probably not, but they learn what it does in CSS and use it 🤷
The clearest thing I've seen proposed is single-axis, but I'd imagine that has the same issue for non-english speakers, and it's way too long, lol.it's clear that everyone has different opinions on why different terms are bad.the entire css masonry story has been like everyone having different opinions on why of things 😅 You should just propose
display: grid-powell .
Do non-english speakers know what isolation means?lol first time I think about this, imagine someone without any context writing
repeat(auto-fit, minmax(min(250px, 100%), 1fr))How about
adaptive-grid?Let's call it
grille then... So even the English speakers are confused and css gets a bit more frenchWhat about
grid-auto-flow : interlock; ?
grid-auto-flow property controls the auto-placement algorithm. interlock means "engage with each other by overlapping or by the fitting together of projections and recesses."they already decided it would be a display type with "drif" in the name
they only need another work do go with it
I see, I have not really been paying attention to the whole proposal. I have followed other CSS things in the past and they just seemed more complicated than they needed to be.
"le masonry". 🙂
La massonerie
I don't have any great words to suggest but I think about things that stack and are different sizes.
"Bricks" sort of makes sense to me from an earlier comment, but there's a Wordpress theme (builder?) called Bricks so I feel like that would be confusing. Also, it sounds like there can be two different directions, which doesn't really go with the idea of "bricks."
My best (weirdest) idea right now is "henge" or "stonehenge" because those objects are different sizes and stacked on top of each other.....
Or, "beads". Because those are usually fit together in an elegant layout and can be different sizes.
do you dream of having your heart inerlinked? interlinked.
I feel like the name should suggest that elements get re-ordered by using the value – something like « sorted », « arranged » or « whitespace-aware ». It seems like it's complex enough to need two words at least.
Or maybe it should belong to
float after all. Hands up for float: sort; 🤡GitHub
[css-grid-3] Masonry Switch Syntax · Issue #12022 · w3c/csswg-drafts
In #11243 we ended up resolving to: Re-use the grid-* properties for templating and explicit placement. Adopt the item-flow proposal (in principle) for flow control. See #11480 With that context, I...
🤦🏻♀️
Out of all the options, I can’t believe that’s the final decision. But at least it’s resolved. I’ve not seen such a polarizing issue in css!
I struggle to form an opinion without seeing the entirety of the layout-mode's associated properties.
The reasoning somehow implies that it gets rendered backwards, or I am reading it wrong?
I actually like that!
Not a fan of that myself. I would have thought that "lanes" implies exactly the opposite of masonry. "lanes" gives (me) the impression or organized order and structure, whereas "masonry" is the opposite of that, allowing the content to be more fluid.
Anyway, at least they have decided on something so can get closer to actually concentrate on getting the browsers to adpot it.
Masonry is still ordered in one direction
What does it mean for the
dense keyword in grid though ?