- From: Josh Tumath via GitHub <sysbot+gh@w3.org>
- Date: Wed, 12 Feb 2025 23:56:29 +0000
- To: public-css-archive@w3.org
So one of the key issues is how to set the tracks for masonry layout. Expanding on the `item-*` properties idea, perhaps there's a way we can make that work for track/column/row templates as well... (Apologies if I'm re-stating an idea that someone's already said.) ### Problem So I really like the `item-*` properties. @fantasai gave this example: ```css .rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); item-flow: row collapse; } .columns { display: grid; grid-template-rows: 2fr 1fr; item-flow: column collapse; } ``` But in a masonry layout mode, what would happen if I tried to set the template for the cross axis? For example... ```css .rows { display: grid; grid-template-rows: 2fr 1fr; /* Would this work? The row axis is collapsed */ item-flow: row collapse; } .columns { display: grid; grid-template-columns: 2fr 1fr; /* Would this work? The column axis is collapsed */ item-flow: column collapse; } ``` It feels very weird to me that we're using `item-flow`/`item-direction` to specify which axis collapses, but, at the same time, when we want to size the tracks, we still have to pick the property that will work: `grid-template-columns` or `grid-template-rows`. (I think similar to one of @tabatkins's criticisms of the 'just use grid' proposal.) ### Proposal **I'm proposing two new `item-*` properties: `item-template-main-axis` and `item-template-cross-axis`**. Think of them as the grid/masonry equivalent of what logical properties are to physical properties, so they'd co-exist with `grid-template-*` in the same way as `margin-block-start` and `margin-top`. So the above example could be rewritten like so: ```css .masonry { display: grid; item-template-main-axis: 2fr 1fr; &.row { item-flow: row collapse; } &.column { item-flow: column collapse; } } ``` How the properties would work in each layout mode: * In the collapsed/masonry mode, the `item-template-cross-axis` property gets ignored. * In the grid mode, `item-template-cross-axis` property works as you would expect. * In the flex layout mode, both the `item-template-main-axis` and `item-template-cross-axis` properties would presumably be ignored. By the way, enabling masonry layouts via `display: masonry` would still work under this proposal. > [!NOTE] > I'm not proposing an `item-template-area` property. In my opinion, the concept of 'template areas' probably doesn't make sense for masonry and it should remain specific to grid layouts. > > But I note that [the original `masonry-*` properties proposal did include `masonry-template-tracks`.](https://www.w3.org/TR/2024/WD-css-grid-3-20241003/#masonry-track-masonry-option) I know we agreed not to use the `masonry-*` properties, but perhaps it does make sense to have `masonry-*` property for that specific purpose after all. Or maybe there is some way of making it work in a layout-agnostic `item-*` property? So what do you all think? Could this work? Does it make sense? -- GitHub Notification of comment by JoshTumath Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11243#issuecomment-2655110949 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 12 February 2025 23:56:29 UTC