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

Another case I ran into where this proposed % resolution creates strange results is the following:

```
<style>
.masonry {
    display: masonry;
    grid-template-columns: repeat(auto-fill, max-content);
    width: 300px;
    height: 300px;
}
.masonry > div {
    height: 100px;
}
</style>
<body>
  <div class="masonry">
    <div style="background: lightskyblue;">
      Number 1
    </div>
    <div style="background: lightcoral;">
      Number 2
    </div>
    <div style="background: lightgreen;">
      Number 3
    </div>
    <div style="background: lightpink;">
      Number 4
    </div>
    <div style="background: orange;">
      Number 5
    </div>
    <div style="grid-column: span 2; background: brown; width: 100%;">
      Number 6
    </div>
  </div>
</body>
```

This produces the following in Chromium:

<img width="174" height="203" alt="Image" src="https://github.com/user-attachments/assets/dd0e896a-631a-4e73-ab91-17c02638822d" />

You would expect there to be 4 columns given the track and item sizes. The issue is that there is a spanner that is set to 100%. According to the intrinsic repeater algorithm, we take this item, size it at 100% against the container (300px), and then divide by 2. Thus, this item's contribution is 150px, which can only be repeated twice.

We then re-run track sizing, and get the true value for the tracks, which is smaller, and then the spanner is sized at 100% against the two tracks it spans.

If we remove the spanner from this test case, you get the following, which is more expected.

<img width="155" height="155" alt="Image" src="https://github.com/user-attachments/assets/2e19b2b1-e43d-4dc3-8665-60a5174e1e43" />

But the issue comes down to % based items resolving against a different source when sizing the auto-repeat intrinsic tracks (against the parent), as opposed to when it is laid out (against the final track sizes).

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


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

Received on Tuesday, 5 August 2025 21:50:54 UTC