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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

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