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

@yisibl thanks for testing this on various use cases! I think this is likely expected. Essentially, we take the item contributions and divide by the span. In this case, we can fit 5 repeats of auto in the container based on the min content size of all items.

In the case where there is an item that spans 5, we end up with 5 auto tracks in total, and auto tracks will expand to fill the remaining space if there is any, hence why things are flush with the container.

In the second example, because there is a span of 6, but only 5 auto repeats can fit in the container, we end up adding a 6th track after the 5th to hold the spanner, which explains why tracks 1-5 don't fill out the container in the same way (they don't have any remaining space to distribute given the existence of the 6th implicit track that was added), and it explains why a span of 6 causes overflow.

This same thing can happen with other kinds of auto repeat definitions (i.e. when the number of repeats produced is not enough to fulfill all the spans, you can end up overflowing in this manner). In the example provided, you can also hit something similar if you have `repeat(auto-fill, 60px)` and switch for a span of 5 to 6.

There are some other interesting cases of overflow with spanners discussed in https://github.com/w3c/csswg-drafts/issues/12899, as well, but those are specifically related to cases where you are mixing intrinsic tracks and definite tracks together and we don't produce enough auto repeats to hold them when we could have.

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


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

Received on Monday, 27 October 2025 16:23:30 UTC