[css-grid-3] Masonry Switch Syntax · Issue #12022 · 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

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 [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 display: masonry.
• Use display: grid + grid-template-rows/columns: collapse.
• Use display: grid + item-pack: collapse (allowing it to show up in the item-flow shorthand 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.