CSS Subgrid не соблюдает родительские районы шаблонов в Firefox ⇐ CSS

[Anonymous]

У нас есть относительно простая сетка/подметка, которую мы перевели к следующему примеру. Цель состоит в том, чтобы иметь изображение в левой, охватывающей два ряда, а затем справа - заголовок, за которым следует копия. (Этот код не показывает причину для подсчета, он просто показывает нашу проблему.)

Код: Выделить всё

Lorem
Lorem ipsum


< /code>
/* Grid and subgrid setup */
.level-1 {
display: grid;
grid-template-columns: 10rem 1fr;
grid-template-areas: "image heading" "image copy";

.level-2 {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / 3;
}
}

/* Grid item placement */
.image {
grid-area: image;
}
.heading {
grid-area: heading;
}
.copy {
grid-area: copy;
}
< /code>
в Chrome это выглядит как ожидалось:

 < /p>
в Firefox, однако, не появляются. />
 < /p>
Онлайн -демонстрация здесь, показывая, что сетка работает, но Subgrid не в Firefox: Firefox: Firefox: Firefox: Firefox: Firefox: Firefox: Firefox: Firefox: Firefox: Firefox: Firefox: Firefox: Firefox. https://codepen.io/chris-haas-the-builder/pen/vylqeyd
В качестве исправления мы можем вручную установить сетку 

и сетку-колонну на подметочной, но такого рода побеждают с целью шаблонных областей. В качестве альтернативы мы можем установить сетку-образные ареасы: наследу в подсегде, но мы не видим того, что конкретно упоминается в спецификации или на MDN, поэтому мы не уверены, что это взломать или законный способ сделать это.
это ошибка Firefox? Или мы не правильно устанавливаем /понимаем сетку-template-areas < /code> с помощью подсегида?

Код: Выделить всё

/* Basic setup, nothing interesting */
body {
font-family: sans-serif
}

* {
margin: 0
}

.image {
aspect-ratio: 1;
width: 100%;
background-color: red
}

/* Grid and subgrid setup */
.level-1 {
display: grid;
grid-template-columns: 10rem 1fr;
grid-template-areas: "image heading" "image copy";

.level-2 {
display: grid;
grid-template-columns: subgrid;

grid-column: 1 / 3;
}
}

/* Grid item placement */
.image {
grid-area: image;
}

.heading {
grid-area: heading;
}

.copy {
grid-area: copy;
}< /code>
Grid


Lorem
Lorem ipsum




Subgrid



Lorem
Lorem ipsum

Подробнее здесь: https://stackoverflow.com/questions/796 ... in-firefox