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

> 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. By far the majority of my grid use-cases are column-forward. I define template-columns, and place items into those columns, and yet the default flow is row.

Unlike grid, in a true column-based masonry, you don't actually have any rows. In grid, you do, so depicting item flow in the opposite direction to the shape of layout makes more sense for grid than it does masonry. Unlike flex, in masonry, the shape of layout and the flow of items don't match. Thus, masonry doesn't really fit into either of these existing patterns, so I'd worry about leaning too much into consistency for the sake of consistency given these differences.

When I wrote tests using Apple's original proposal to trigger a column-based masonry using `grid-template-rows: masonry`, I had a hard time remembering which layout I would get as a result. I also saw a lot of articles from authors that noted confusion by this point, as well. I worry that having `item-flow: row` mean a column-based masonry will end up leading to the same high author confusion. As a result, I think the argument for keeping consistency with the grid-template positioning direction to be extremely compelling, more so than consistency with the meaning of `item-flow` in other layout types that simply don't map consistently in all of these concepts anyways.

If we need to change the name of the property to make this clearer, I would be supportive of that, but I fear that using `item-flow:row` to create a column-based masonry (that has no distinct rows in its layout) to be extremely confusing.

Perhaps a property with a name like `item-stack` could make sense here:
- In Grid, this ends up mapping to what we currently map `item-flow` to
- In Flex,  this ends up mapping to what we currently map `item-flow` to
- In Masonry, we would map this to `column` in a waterfall scenario (items technically flow right to left, but create stacks in the column direction), and we would map this to `row` in a brick wall scenario (items technically flow bottom to top, but create stacks in the row direction)

This would also match the concept of the stacking axis that we already have for masonry.

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


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

Received on Wednesday, 22 October 2025 23:14:56 UTC