[csswg-drafts] [css-grid-3][masonry] min-content sizing within a row masonry (#12843)

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

== [css-grid-3][masonry] min-content sizing within a row masonry ==
In the following test case:

```
<!DOCTYPE html>
<style>
.masonry {
    display: masonry;
    background: gray;
    masonry-direction: row;
    grid-template-rows: auto auto auto;
    width: min-content;
    padding: 10px;
}
</style>
  <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="grid-row: span 2; background: brown;"> Number 4</div>
  </div>
</html>
```

We get the following rendering in Chromium, where the items end up overflowing the container, which doesn't match what happens in Grid:
<img width="77" height="45" alt="Image" src="https://github.com/user-attachments/assets/2338e814-7d6e-4918-9ddb-7b56d38a2db3" />

The reasoning is that when we calculate min/max sizes for the container, we force the items to their min content size to determine the result of `width: min-content` on the container.

At layout time, the container is sized to its `min-content` size. Items in a row masonry container are constrained by this in the inline direction, rather than what a column track would be constrained by under this condition, like it does in grid.

In the masonry axis, items are sized based by the `fit-content` definition, which in this case, ends up being `max-content`. So at layout time, the items are sized under `max-content` in the masonry axis and end up overflowing the container in the inline direction.

We don't run into this in grid because the constraint space for grids is constrained by tracks in both directions, which ends up enforcing the `min-content` constraint on the items in the inline direction.

The output we get above technically matches the spec, but is this the behavior we want?

CC @celestepan 

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


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

Received on Monday, 22 September 2025 18:34:31 UTC