[csswg-drafts] [css-grid-3][Masonry] Repeat(auto-fill, auto) and % sized items (#12432)

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

== [css-grid-3][Masonry] Repeat(auto-fill, auto) and % sized items ==
In [css-grid-3](https://www.w3.org/TR/css-grid-3/#masonry-intrinsic-repeat) is a tentative definition for sizing auto tracks within an auto repeat.

However, it is unclear what items with a % size contribution should resolve against.

One option that @tabatkins, @bfgeek and I discussed was resolving against the parent, which would result in the following:

```
<style>
.masonry {
    display: masonry;
    background: gray;
    item-tolerance: 0;
    grid-template-columns: repeat(auto-fill, auto);
    width: 400px;
    height: 200px;
}

.masonry > div {
    width: 25%;
    height: 100px;
}
</style>
<div class="masonry">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
```

In the above example, the auto tracks would get sized to 100px, and you'd end up with 4 columns. Then the items when laid out would take up 25% of the track size, and get sized to 25px. Meaning that `auto` isn't the size of the largest contribution, since the items end up being sized based on the track size itself, and will always end up being smaller.

This seems potentially reasonable enough. The other option would be to size the item as `auto`, but in the above case would lead to `auto` computing to 0px, which isn't great, but it may result in potentially better behavior if there were other fixed size items in the container.

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


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

Received on Tuesday, 1 July 2025 22:07:25 UTC