Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KurtCattiSchmidt opened this issue Apr 25, 2025 · 0 comments

Comments

@KurtCattiSchmidt
Copy link

KurtCattiSchmidt commented Apr 25, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant