[css-grid-3][masonry] Discussion overview for masonry syntax discussions

[tabatkins]

This is just a summarizing/guiding issue for the Grid 3/Masonry/Flexbox syntax, outlining the goals for the discussion and the rough priority @fantasai and I are assigning to them:

Roughly, the discussion covers four groupings of properties:

1. template longhands (track sizes, track names)
2. the other longhands (directions, slack, pack)
3. new display value, or display:grid + some toggle
4. shorthands

Here's the issues in more detail:

1. Should "masonry layout" use its own set of template definition properties (masonry-template-tracks, masonry-template-areas) or just reuse the grid-* ones (grid-template-rows/grid-template-columns, grid-template-areas, ignoring whichever of -rows/-columns is in the wrong axis). [css-grid-3][masonry] Masonry Syntax Debate #11243

   • We have almost completely unified the set of allowed track-sizing behaviors between Grid and Masonry. Remaining divergence is "auto-repeating intrinsically-sized tracks", which are allowed in Masonry but don't seem to have an obvious useful/meaningful behavior in Grid. Perhaps we could just define those to do a single repeat, like the auto-repetition does today when the grid itself is intrinsically sized.
   • grid-template-areas is well-suited for Grid with its syntax of multiple strings, and assuming they'll be formatted across multiple lines to form "ASCII art" of the Grid areas. Masonry only ever has one dimension to name, tho, which results in grid-template-areas: "foo bar baz" for columns and grid-template-areas: "foo" "bar" "baz" for rows.

2. Should we adopt the item-* set of properties unifying the non-template parts of Flexbox/Grid/Masonry definition? If so, which one? [css-flexbox][css-grid] Unifying grid-auto-flow and flex-flow #11480

   • Original Apple proposal: [css-flexbox][css-grid] Unifying grid-auto-flow and flex-flow #11480 (comment)
   • Tab counter-proposal: [css-flexbox][css-grid] Unifying grid-auto-flow and flex-flow #11480 (comment) (scroll to end of the comment)
   • Unified compromise proposal: [css-flexbox][css-grid] Unifying grid-auto-flow and flex-flow #11480 (comment)
   • Something else?
   • If not, do we take the masonry-* properties from Grid 3's "grid-independent" proposal? (I'm on record as being willing to Formally Object to the "grid-integrated" property set.)

3. Should "masonry layout" be its own display keyword, or just use grid + a control that toggles the grid into "masonry mode"? [css-grid-3][masonry] Masonry Syntax Debate #11243

   • Item 1 is independent of this; we could still, in theory, re-use the grid-template-* properties with display: masonry.
   • In item 2, if we do display:grid + a toggle:
     • If we do the item-* properties, it'll be part of item-pack, which also controls denseness and balancing.
     • If we don't do item-* and instead have masonry-* properties, it'll be part of masonry-flow, which also controls the masonry directions.

4. The grid/grid-template shorthands, as written, doesn't work for "masonry layout", and we can design a much better syntax. Should it just be another grid syntax branch? Or should it be its own masonry shorthand property? [css-grid-3][masonry] Masonry Syntax Debate #11243

   • Wherever it lives, the syntax would be <tracks> || <areas> || <direction> || <cross-direction>, possibly + || slack <slack>, setting all the template properties from item 1 and "other" properties from item 2.
   • If item 1 is resolved in favor of reusing grid-template-* properties, what do we do about the grid-template shorthand? (See the grid-template bullet point under "Specific Examples" in this comment for the issues with reusing grid-template as-is for masonry layout.)

[alisonmaher]

Remaining divergence is "auto-repeating intrinsically-sized tracks", which are allowed in Masonry but don't seem to have an obvious useful/meaningful behavior in Grid.

We also haven't converged on the potential difference in the default value for masonry-template-tracks (i.e. if it should be repeat(autofill, auto)) which I suppose we can cover with this first set of topics.