[csswg-drafts] [css-grid-3][masonry] impact of negative margins on running positions within a track, dense-packing, and alignment (#12918)

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

== [css-grid-3][masonry] impact of negative margins on running positions within a track, dense-packing, and alignment ==
If an item has negative margins, it's not clear in the spec how this will affect the placement of the items following it in the same track. 

For example, `item 2` here may have negative margins that cause it to end earlier than `item 1`: 

<img width="200" height="517" alt="Image" src="https://github.com/user-attachments/assets/0a22e420-b27f-4ad5-b133-8cb8c57b9c92" />


In CSS Flex, when an item has negative margins, the items following it are always placed directly after.  In this example:

```
<body>
  <div class="flex">
    <div style="background: lightblue; width: max-content;"> hello world </div>
    <div style="background: lightgreen; margin-left: -20px;"> hello world </div>
    <div style="background: lightblue; width: max-content;"> hello world </div>
  </div>
</body>
```













These are 3 of the more interesting cases that I can think of for negative margins in the stacking axis.
1) negative margin < width of previous item:
 
Plain Text
<body>
  <div class="flex">
    <div style="background: lightblue; width: max-content;"> hello world </div>
    <div style="background: lightgreen; margin-left: -20px;"> hello world </div>
    <div style="background: lightblue; width: max-content;"> hello world </div>
  </div>
</body>
 
Flex's behavior doesn't leave space behind at all like grid does.  In this example, item 2 is what has a negative margin: 
item 2 would cover parts of item 1, and item 3 is placed right next to item 2.
 
2) negative margin > width of previous item
 
Plain Text
<body>
  <div class="flex">
    <div style="background: lightblue; width: 70px;"> hello world </div>
    <div style="background: lightgreen; margin-left: -80px;"> hello world </div>
    <div style="background: lightblue; width: 70px;"> hello world </div>
  </div>
</body>
 
when item 2 has a margin greater than the width of item 1, item 3 is still placed right after item 2, item 2+3 are placed on top of item 1.
 
3) negative margin > width of previous item, no item follows item with negative margin
 
Plain Text
<body>
  <div class="flex">
    <div style="background: lightblue; width: max-content;"> hello world </div>
    <div style="background: lightgreen; margin-left: -80px;"> hello world </div>
  </div>
</body>
the end of item 1 peeks out from behind item 2.
 
 
Based on these examples, if we plan on treating our stacking axis exactly like flex, then we should still set the new running position to always be the end of the new item.  I think what it means for dense packing is that the "openings" would not necessarily reflect the visual openings. If a user is using negative margins, can we assume that they are aware of the risk of causing elements to overlap?

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


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

Received on Wednesday, 8 October 2025 19:17:32 UTC