Re: [csswg-drafts] [css-grid-3][masonry] Masonry Syntax Debate (#11243)

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