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

Разбираемся в CSS
Anonymous
CSS Subgrid не соблюдает родительские районы шаблонов в Firefox

Сообщение 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 с подсечкой?

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

Вернуться в «CSS»