Re: [csswg-drafts] [css-grid-3] Masonry Switch Syntax (#12022)

I have seen the CSSWG has resolved using a new display type to enable masonry layout. When considering masonry, I would like to take a step back. I haven't followed the discussions fully over the years, but as far as I understand according to the OP, there were basically proposals for 1) retrofitting masonry into grid and extending it and/or 2) abstracting the current layout models further with `item-*` properties and making masonry a new inner display type. However, I have not seen retrofitting masonry into flex being proposed but I might have missed it (note this is not exactly #5039). This would make sense to me as the draft itself currently describes masonry as being half flex:

> Masonry layout lays out items into pre-defined tracks similar to grid layout in one axis (called the grid axis), but flows them freely similar to flex layout in the other (called the stacking axis). Similar to grid layout and unlike flex layout, masonry layout’s auto-placement distributes items across the tracks to keep the lengths of those tracks as similar as possible.

On the one hand, masonry might be closer to grid layout than to flex layout in its current form, on the other hand, the currently much more limited control on flex lines than on grid tracks can be seen as design space masonry could fit in, and that could also benefit regular flex layout.

I understand this might be off the table already and I am not familiar enough with layout algorithms to know if this simplistic, technically possible or even desirable, but as the OP says new ideas are also welcome, here is some food for thought. The vague idea is masonry layout would be a (wrapping) flex layout, with items being packed primarly along the cross axis instead of the main axis.

With the folowing properties:

```
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-wrap-packing: main | cross;
```

regular flex layout would be `flex-wrap-packing: main` and masonry flex layout would be `flex-wrap-packing: cross`.

To know when to wrap (i.e. adding an item to a non-empty flex line), this would require a way to define the cross size of flex lines, which could reuse `grid-template-{columns,rows}` properties (to follow `{column,row}-gap`'s naming precedent) or, if that's too confusing or not web-compatible, at least its syntax as a `flex-template-lines` property.

This raises some technical / design questions such as:
- what would happen once all the flex lines are full? Maybe something like `grid-auto-{columns,rows}` / `flex-auto-lines` could control how to generate extra flex lines. Maybe these properties could also be used for regular flex layout.
- could that work with `flex-wrap` being `nowrap` too? with `flex-wrap-packing` being the only syntax switch?
- would `flex-template-lines` be part of the syntax switch too? could `flex-template-lines` not being `none` be the only syntax switch without even requiring `flex-wrap-packing` to exist?

If exploring this direction is worth it, should i open a new issue to avoid sidetracking this one?

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


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

Received on Friday, 14 November 2025 17:17:01 UTC