[csswg-drafts] [css-grid-2] grid-area subgrid inheritance when only one dimension is subgridded (#12124)

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

== [css-grid-2] grid-area subgrid inheritance when only one dimension is subgridded ==
I came across this case while working on a different bug and discovered that Chromium isn't interoperable with Firefox and Safari in this scenario:

```
<style>
.grid {
  background: red;
  display: grid;
  height: 100px;
  width: 100px;
  grid-template: 50px 50px / 50px 50px;
  grid-template-areas: "item"
                       "item";  /* Note that this grid-area only covers a single column */
}
.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 50px 50px; /* Rows aren't subgridded! */
  grid-column: span 2;
  grid-row: span 2;

}
.item {
  background: green;
  grid-area: item;
}
</style>
<div class="grid">
  <div class="subgrid">
      <div class="item"></div>
  </div>
</div>
```

https://codepen.io/Kurt-Catti-Schmidt/pen/OPPgzpV

Chrome (with my fix for the related bug):   the grid-area is applied, it fills the first column
Firefox/Safari:                                               the grid-area is dropped entirely

Since the subgrid is only subgridded in the column direction, what should happen to the grid areas? Do they get dropped? Firefox devtools actually displays the grid area names on the subgrid, but grays them out.

The spec covers partial overlaps in the subgrid for implicit grid lines, but doesn't cover two-dimensional grid-areas when subgridded in one dimension.

Changing `grid-template-rows` to `subgrid` on `.subgrid` makes the subgrid two-dimensional and thus interoperable.

The partial overlap was discussed here: https://github.com/w3c/csswg-drafts/issues/4411, but this is a bit different, it's mapping of a two-dimensional grid-area into a one-dimensional subgrid.

I'm happy to change the behavior in Chromium and add a WPT if Safari and Firefox are correct here, but I'm not positive this is the correct behavior.

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


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

Received on Friday, 25 April 2025 22:26:53 UTC