[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.

[css-meeting-bot]

The CSS Working Group just discussed [css-grid-3][masonry] Discussion overview for masonry syntax discussions.

The full IRC log of that discussion

<bramus> fantasai: tab and i divided the discussion in 4 separate pieces
<bramus> … suggestign to talk abou twhether to use masonry-template or to reuse grid props for placement and declaring tracks
<bramus> … 2nd about directional flow control props
<bramus> … feedback from tag was to come up with unified syntax
<bramus> … 3rd on how to trigger a masonry layout specifically
<bramus> … new display value for new collapse value in grid-template values and new proposal about unified flow control props
<bramus> … and 4th to introduce any shorthands for masonry or integrate with grid shorthand or both
<bramus> … that is the overview
<bramus> … most complicated will be 2nd one
<bramus> … jen has prepared a slide deck with illustrations to help with that
<bramus> astearns: alison you added sth to 1st part?
<bramus> alisonmaher: could be combined with 1st. plan eon talk about repeat-auto-fille auto and that it should be default or not
<bramus> fantasai: gonna insert that before the template topic
<bramus> … its a bit more complicated
<bramus> astearns: any comments so far?