Re: [csswg-drafts] [css-grid-3][masonry] item-flow row vs. column in masonry layouts (#12803)

To me, the note at the start of https://github.com/w3c/csswg-drafts/issues/12803#issuecomment-3643945412 is key:
> [!NOTE]
> Thanks to the new `normal` initial value, unless you're specifically reversing one of the flow directions, there's not really any reason to use these properties at all. They're needed for the shorthanding model, and to make Grid Lanes a little more consistent with the other layouts. Authors will, almost always, just set one of `grid-template-columns` or `grid-template-rows` to define their grid lanes, and it'll just do The Obvious Correct Thing.

But adding to this, @alisonmaher's argument in https://github.com/w3c/csswg-drafts/issues/12803#issuecomment-3662413291 made me think of a hybrid between A and B1. With apologies for hijacking an ongoing poll, I'll call this:

**option D**: use `grid-auto-flow`, with `row` and `columns` having B1/C semantics, but use distinct keywords, A-style, for both types of reversing.

`grid-auto-flow: [ normal | row | column ] || fill-reverse || wrap-reverse || dense`

(In terms of bikesheding, I use `fill-reverse` from option A, but replaced its `track-reverse` with `wrap-reverse` because it needs to work for grid too, and grid has tracks going both ways. We could bikeshed further: I kind of like `flow-reverse` instead of `fill-reverse` and `stack-reverse` instead of `wrap-reverse`, though not everybody might…)

This has the advantages that:
* no need to mint a new property (like B), keeping the semantics consistent with the existing one (like B1)
* if you've set your gird-template-* correctly, no need to use the explicit row or column values at all when you want to reverse in either or both directions (like A), so that you can continue relying on the Obvious Correct Thing even when you want to reverse something

If you want a waterfall layout, bottom-to-top, you do:
```css
display: grid-lanes;
grid-template-columns: 100px 200px;
grid-auto-flow: wrap-reverse;
```

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


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

Received on Wednesday, 17 December 2025 08:17:27 UTC