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

@alisonmaher 

```html
<style>
.masonry {
    display: masonry;
    background: gray;
    grid-template-columns: repeat(auto-fill, auto);
    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 5; background: brown; ">
      Number 6
    </div>
  </div>
</body>
```

When `span 5`, it perfectly fills the container.

<img width="339" height="329" alt="Image" src="https://github.com/user-attachments/assets/5cee8dac-da9c-41a5-95a3-ba420bb8bfe9" />


However, when `span 6`, two situations occur:

1. The text on the first line wraps to a new line, causing the first line to not fill the container.
2. The elements on the second line overflow the container.

Are these two scenarios as expected?

<img width="399" height="348" alt="Image" src="https://github.com/user-attachments/assets/c7e272a3-f100-4582-aa6b-9f9de2f1cc87" />

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


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

Received on Sunday, 26 October 2025 15:05:41 UTC