Description
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 Canary (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: #4411, but this is a bit different, it's mapping of a two-dimensional grid-area when only one dimension is subgridded.
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.