Re: [csswg-drafts] [css-grid-3][masonry] Masonry Syntax Debate (#11243)

I think I did a poor job of articulating my position on the Masonry Layout Switch in the room today, so I'd like to try again.

What I like about the `item-*` properties, as an idea, is that they factor out concepts that make sense, and can represent the same concept, across multiple layout types: whether a 2d layout is arranged principally in rows or columns; the wrapping behavior for a 2d layout; the amount of "wiggle room" when placing items in a 2d layout. That lets me mentally group these properties into the same bucket as other property families that work across these contexts: gap, rule, even backgrounds and borders.

I feel the same way about grid-template-rows and grid-template-columns with the `masonry` keyword dropped from the syntax. Given a time machine I might rename them to something without the word "grid" to indicate that tracks/guidelines are a more general concept; I don't know that aliasing them now for that reason would be high value. The point is that tracks/guidelines make sense across multiple 2d layout types.

`item-pack: collapse` as a grid/masonry switch isn't quite there yet for me. Thinking about it from a greenfield design scenario - or through the eyes of someone learning these for the first time - I think "collapse tracks of a 2d container in one direction" could be interpreted either as masonry or as wrapping-flexbox. There's a missing ingredient which is *how the descendant items are laid out* - which, as @alisonmaher pointed out, is exactly the inner display type expressed by [the `display` property](https://drafts.csswg.org/css-display/#the-display-properties) - and it's how we currently differentiate between grid and wrapping-flexbox. Perhaps there's an `item-*` which could supply that information in a consistent way. But with what we have so far, that's why I still prefer `display: masonry` to complement the great work that's been done so far to refine the proposals.

-- 
GitHub Notification of comment by kbabbitt
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11243#issuecomment-2628744089 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 1 February 2025 03:38:28 UTC