[csswg-drafts] [css-grid-3] Do we need a `masonry-basis` property? (#12043)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid-3] Do we need a `masonry-basis` property? ==
In flexbox, we have `flex-basis` separate from `max-width`/`min-width`, which we use for linebreaking purposes; after we determine what all goes on each line, the items can grow/shrink as they wish.

Would this concept be useful in Masonry as well? It would be useful when doing `repeat(auto-fill, ...)` -  `masonry-basis` would be used to determine what size we use for the purpose of sizing masonry tracks, and then the item would size normally when it's actually placed, ignoring the basis.

Today, the best we can do for this case is set a `max-width`, but that prevents the item from growing *after* we determine the track sizes (which might end up larger than that max width!).

For example:

```css
.masonry {
  display:masonry;
  grid-template-tracks: repeat(auto-fill, basis);
  /* ^^^ the default value, hopefully */
  width: 700px;
}
.masonry > .item {
  masonry-basis: 200px;
}
```

This would result in us calculating 3 columns, because all the items are requesting 200px size. The columns then (becuase they're `justify-content:stretch` by default) stretch to 233px, and the items all lay out into that size and become 233px as well.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12043 using your GitHub account


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

Received on Wednesday, 2 April 2025 20:59:49 UTC