[csswg-drafts] [css-grid-3] [masonry] Should items with a definite row/column be placed first? (#12393)

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

== [css-grid-3] [masonry] Should items with a definite row/column be placed first? ==
In the test [masonry-item-placement-001.html](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/external/wpt/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.html?q=masonry-item-placement-001&ss=chromium):
```
<grid>
  <item style="grid-column:1">6</item>
  <item>5</item>
  <item style="margin-top:10px">3</item>
  <item style="grid-column:span 2">1</item>
  <item>2</item>
  <item style="grid-column:3/span 2">4</item>
</grid>
```

Blink, Webkit, and Gecko all perform placement differently, and we'd like to confirm what the correct behavior is.

Blink's placement looks like this: 
![Image](https://github.com/user-attachments/assets/7e0b8a9f-6586-4227-98b2-5619e15091d1)

Webkit's placement result:
![Image](https://github.com/user-attachments/assets/80b11f61-27a6-4b19-92d4-512358493c6b)

Gecko's placement result (which matches the current associated wpt reference file):
![Image](https://github.com/user-attachments/assets/a2d69604-8644-4a18-a7c0-3466246b4e9d)

It looks like the main difference is that Webkit places items with explicit rows/columns first, and Gecko doesn't prioritize the minimum running position and places the item displaying `2` at the first position after the auto placement cursor.

It's not specified in the "Layout Algorithm" section of the masonry spec if items with a definite row/column should be placed first: https://drafts.csswg.org/css-grid-3/#masonry-layout-algorithm.  In grid, explicitly-placed items are placed first: https://drafts.csswg.org/css-grid-2/#auto-placement-algo, but we wouldn't need that for masonry since we don't have the concern of auto-placed items occupying the exact cell that explicitly-placed items should take up.

@tabatkins @fantasai 

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


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

Received on Tuesday, 24 June 2025 15:52:55 UTC