[css-grid-3] Masonry Switch Syntax #12022
Description
In #11243 we ended up resolving to:
- Re-use the
grid-*properties for templating and explicit placement. - Adopt the
item-flowproposal (in principle) for flow control. See [css-flexbox][css-grid] Unifying grid-auto-flow and flex-flow #11480
With that context, I'm opening this issue to focus on one specific sub-point of the syntax debate: how do we trigger masonry layout?
The three proposals so far are:
- Use a new
displayvalue. Adopted but needs name bikeshedding, see below. Usedisplay: grid+grid-template-rows/columns: collapse.- Use
display: grid+item-pack: collapse(allowing it to show up in theitem-flowshorthand as .e.g.item-flow: row collapse).
Now that item-flow has been adopted, nobody is advocating for the grid-template-rows/columns option. But people wanted some time to absorb the new item-flow situation before deciding. See https://www.w3.org/TR/css-grid-3/#flow-control
New ideas are also welcome.
UPDATE: The CSSWG resolved to use the display property together with a value that includes the word grid. Currently looking for proposals on what that name should be. It could be grid-something, something-grid, or grid something/something grid (two keywords). Names proposed so far include:
grid-collapsedorcollapsed-gridorgrid collapsegrid-stackorstacked-gridgrid-packorpacked-gridorgrid packcompact-gridgrid-masonryormasonry-gridgrid-flexorflex-gridgrid single-axis(masonry grid) vsgrid dual-axis(normal grid)staggered-gridorgrid staggereduneven-grid