[css-grid-3][masonry] Discussion overview for masonry syntax discussions · Issue #11593 · w3c/csswg-drafts (original) (raw)

Skip to content

Navigation Menu

• • GitHub Copilot Write better code with AI
  • GitHub Advanced Security Find and fix vulnerabilities
  • Actions Automate any workflow
  • Codespaces Instant dev environments
  • Issues Plan and track work
  • Code Review Manage code changes
  • Discussions Collaborate outside of code
  • Code Search Find more, search less
• Explore
  • Learning Pathways
  • Events & Webinars
  • Ebooks & Whitepapers
  • Customer Stories
  • Partners
  • Executive Insights
• • GitHub Sponsors Fund open source developers
  • The ReadME Project GitHub community articles
• • Enterprise platform AI-powered developer platform
• Pricing

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sign up

Description

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. Templating and Placement Properties 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.
     Update: The CSSWG has resolved to re-use the grid-* properties.
2. Flow Control Properties 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.)
     Update: The CSSWG resolved to pursue this idea; but there are still open debates on its possible variations.
3. Masonry Layout Switch 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 Switch Syntax #12022 * 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. Shorthanding 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] Adjustments to shorthanding #12023
   • 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.)