[csswg-drafts] [css-grid] Clarify how collapsed tracks affect positions of abspos elements in the presence of gaps (#10813)

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

== [css-grid] Clarify how collapsed tracks affect positions of abspos elements in the presence of gaps ==
We only [collapse tracks](https://drafts.csswg.org/css-grid/#collapsed-grid-track) when they are empty, so this is usually not a problem.

However, being empty only refers to grid items, so an empty track can still have abspos elements.

```html
<!DOCTYPE html>
<style>
.grid { position: relative; display: inline-grid; grid-template: 100px 100px / 100px repeat(auto-fit, 0) 100px; grid-gap: 10px }
.grid > div { position: absolute; inset: 0; min-width: 1px; display: flex; flex-wrap: wrap; place-content: center }
</style>
<div class="grid">
  <div style="grid-area: 1 / 1 / 2 / 2; background: cyan">1</div>
  <div style="grid-area: 2 / 1 / 3 / 3; background: magenta">2</div>
  <div style="grid-area: 1 / 3 / 3 / 4; background: orange">3</div>
  <div style="grid-area: 1 / 2 / 3 / 3; background: black; ">4</div>
</div>
```

| Firefox | Chrome |
| - | - |
| ![imatge](https://github.com/user-attachments/assets/d648e9e3-463c-48ee-9420-1ebbffdaf772) | ![](https://github.com/user-attachments/assets/dab8f106-bf22-4cfc-90f1-667bc043e4b1) |

Both Firefox and Chrome agree that, even though it spans an extra column, item 2 should end at the same position as item 1.
They disagree with the position of item 4, though.

The spec just says that the track should be treated as having a fixed track sizing functin of 0px, which would result in

![](https://github.com/user-attachments/assets/69babb0c-0cde-457d-85d9-db0e95aa1619)

and also

> When a [collapsed track](https://drafts.csswg.org/css-grid/#collapsed-grid-track)’s gutters collapse, they coincide exactly—​the two gutters overlap so that their start and end edges coincide.

which isn't clear about what happens with the start and end positions of the track.

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


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

Received on Sunday, 1 September 2024 15:52:33 UTC