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

> They don't want a lot of extra new stuff for the sake of perfection. They want to reuse the properties we already have. They feel overloaded already.

With option A, we would only be adding one additional property compared to the other two options (which isn't a huge add, unlike other discussions around the template track defection and placement properties), and I think Option A actually ends up reusing existing authoring mental models, as opposed to the proposals to reuse `grid-auto-flow`.

In Grid, the layout is inherently 2D, so the only way to describe the directional pieces an author can change is via the flow of items (hence `grid-auto-flow`).

In Flex, the layout is 1D, and the way that authors adjust the direction of the layout is via `flex-direction` (i.e. the direction of the flex container), and the flow of items within the lines can be reversed using this same property.

I'd argue that because Grid Lanes is 1D, it should follow a similar mental model to Flex when it comes to setting the direction of the container (`grid-lanes-direction`) and the items can be reversed within the tracks via the same property (i.e. what is proposed in option A). Reusing `grid-auto-flow` actually breaks this existing mental model for 1D vs 2D layouts for authors.

> If the note about not needing to use these properties very often is correct (and I believe it is), then I don’t think we need an entirely new property or a new way of interpreting the row/column values of grid-auto-flow.

Although the default of `normal` does avoid the authoring need to set this often, they will need to use this property when reversing items. And reusing `grid-auto-flow` still makes this piece awkward.

For example, with Option B1, if you have the following layout:
```
display: grid-lanes;
grid-template-rows: 100px 100px;
```

You will get a brick wall. If an author then wants to reverse items within that, the initial gut instinct will likely be to set `grid-auto-flow: row-reverse`. However, because this property doesn't match the direction of tracks, setting this will actually either do nothing, or instead give you a waterfall layout with a track definition of `none` (I'm not sure which it is since we don't have spec text, but either way isn't a great experience for authors). So as far as I understand, only two of the three reverse keywords will actually work depending on which direction you set your tracks in. With option A, you can set either of the reverse keywords, and the right thing will happen.

Option B2, unlike B1, does partially avoid this, but has the downside of `grid-auto-flow` having different interpretations for the directional keywords between Grid and Grid Lanes.

And option C I personally have a hard time wrapping my head around.

----
In summary, option A is the only option that fits into existing mental models of setting directionality in a 1D layout mode, and avoids the side effects of mismatched directionality you get with both B1/B2, which is why I went with option A.

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


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

Received on Tuesday, 16 December 2025 21:16:40 UTC