[csswg-drafts] [css-grid-2] How to properly accommodate margin/border/padding of a subgrid with no item on the edges (#7465)

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

== [css-grid-2] How to properly accommodate margin/border/padding of a subgrid with no item on the edges ==
Consider the following example:
```html
<style>
.grid {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
}
.subgrid {
  display: grid;
  background: grey;
  grid-column: 1 / -1;
  padding: 0px 10px 0px 90px;
  grid-template-columns: subgrid;
}
.subgrid > div {
  width: 100px;
  height: 20px;
  grid-column: 2;
}
</style>
<div class="grid">
  <div class="subgrid">
    <div></div>
  </div>
</div>
```

From [this section of the spec](https://drafts.csswg.org/css-grid-2/#subgrid-edge-placeholders), my understanding is that just a single hypothetical item should be added to accommodate the subgrid's padding, it should span all columns on the grid and should have a size of 100px from the subgridded item width + the padding of the subgrid for both edges, 100px too, a total of 200px.

My question is: after the track sizing algorithm distributes a 100px size to the column in the middle (starting in line number 2), the algorithm should equally distribute 200px from the hypothetical to the 3 columns, causing the first column to have 50px, the second 100px and the last one 50px. When we perform layout, is it the expected behavior that the padding does not match the column sizes? The left padding on the subgrid should push the subgridded item 90px, but in practice the first column will be 50px, possibly producing some undesirable side effects when the subgrid's padding goes beyond the first column.

My suggestion is to remove the later bit in the following sentence: "This [hypothetical] item’s sizes are taken from the sizes of the largest such item of each span size, and are additionally inflated by the subgrid’s own margin/border/padding at that edge ~~(or both edges, if it happens to be the most extreme item on both sides and is also the smallest span size)~~", since that merges both extra margins.

Currently is difficult to provide a live example to observe what happens, it seems like Gecko and Webkit are not introducing hypotheticals to replicate the issue I'm mentioning; the example above runs as we would expect. However, if we replace the template columns from the outer-grid and use `grid-template-columns: 0px auto 0px` instead, the padding of the subgrid is not accommodated. Looking at their implementations, it seems they're accommodating the subgrid's margin/border/padding at the first track from the respective edge if such track is intrinsically sized, and I have to agree that it is less disruptive to implement.

While we are on topic: it is easy to miss the mbp in current implementations, we have no test coverage for both examples above. I would argue that is probably better to keep things simple and we should land at some middle ground where the spec defines an easier way (implementation-wise) to accommodate the mbp in those edge cases, but I don't have a definitive answer on how to achieve that.

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


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

Received on Thursday, 7 July 2022 00:00:06 UTC