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

Okay here's the comment I thought I'd already posted; it was sitting nearly finished in a tab on my laptop.

> Digging into this a bit more, I feel pretty strongly that the layout shape approach is an unreliable distraction.

Restating/expanding on what I said in the call a bit, if you have a "waterfall" masonry, then you...

* use `grid-template-columns` to define the tracks
* use `grid-column` to explicitly place items
* use `column-gap` to specify gutters
* use `column-rule` to put lines in

In *every single case* where we have a row/column pair of properties, it's the `column` one that will be used for a "waterfall" layout. This is why I feel so strongly that `item-flow: column` must be the way to specify this layout as well.

(Similarly, for the subset of those properties that apply to flexboxes, you use the `column` ones when you have a `flex-flow: column` container.)

This would just be *wrong* imo:

```css
.foo {
  display: grid-stack;
  item-flow: row;
  grid-template-columns: repeat(auto-fit, 200px);
  column-gap: 2em;
  column-rule: thin solid silver;
}
```

> And I don't find it convincing to say the default waterfall is defined with grid-template-columns, and the explicit positioning in that waterfall uses grid-column and therefor we need the flow to be column – because that same logic could be applied to most grids. 

Grids are hard to apply any of this logic to, since they have "shape of layout" pointing in *both* directions, and thus all the supporting properties and values refer to both directions equally. `grid-auto-flow` and its supporting properties are the *only* place in Grid that favors an axis, but even that's consistent - like Flexbox, `grid-auto-flow` both sets the direction-of-flow and (in non-degenerate grids, with multiple rows and columns defined) the shape-of-layout, in a way: it fills in an entire row before moving to the next row and filling it in, and when you need to create more implicit tracks to fit stuff, `grid-auto-flow: rows` is paired with `grid-auto-rows`, meaning that `rows` is referring to row tracks as the layout unit it cares about.

(In the call, you mentioned a "default" grid - no `grid-template` at all - laying out in a single column due to `grid-auto-flow: rows`. I do think that's a fairly degenerate situation for figuring out things here. Notably, you still control the size of the *rows* with `grid-auto-rows`; `grid-auto-columns` only gets consulted once, when it has to create the initial implicit column for the very first item.)

In all cases: Flexbox, Grid, and hopefully Masonry, we have consistency in naming of the direction and all the supporting properties that care about that direction.

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


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

Received on Friday, 24 October 2025 18:28:45 UTC