Переполнение / расширение CSS-областей для определенных элементов

Question

Я изучаю CSS Grid и очень увлечен им.В частности, я использую подход template-areas для определения структуры.Вот пример кода, который я написал для определения основного макета статьи с двумя боковыми панелями, областью основного контента и нижним колонтитулом статьи:

HTML:

<div class="article-wrapper">
    <div class="sidebar-left">
    Left Sidebar Content
    </div>
    <div class="article-content">
        Main Article Content
        <div class="article-overflow">
            Overflow Content
        </div>
    </div>
    <div class="sidebar-right">
        Right Sidebar Content
    </div>
    <div class="article-footer">
        Article Footer Content
    </div>
</div>

CSS:

.article-wrapper{
  display:grid;
  grid-template-areas:
          "h h h h h h h h h h h h"
          "l l c c c c c c c c r r"
          "l l f f f f f f f f r r";
}

.article-wrapper > .article-sidebar-left{
  grid-area: l;
}
.article-wrapper > .article-sidebar-right{
  grid-area: r;
}
.article-wrapper > .article-content{
  grid-area: c;
}
.article-wrapper > .article-footer{
  grid-area: f;
}

Мой вопрос;Есть ли способ, используя этот подход областей сетки, что я могу сделать элемент article-overflow, который полностью находится в пределах c grid-template-area, чтобы простираться в области l и r?

По сути, я бы хотел, чтобы ширина элемента article-overflow была такой:

l x x x x x x x x x x x r, тогда как теперь это l l x x x x x x x x r r

Другими словамиЯ пытаюсь расширить его на одну единицу сетки в каждую из областей, используемых в настоящее время боковыми панелями.

Answer 1

... есть ли способ, используя этот подход областей сетки, чтобы я мог создать элемент .article-overflow, который полностью находится внутри области c grid-template-area, чтобы перейти в l и r областей?

Нет.

Элемент .article-overflow даже не является элементом сетки, поэтому он не распознает свойства сетки ¹ .

Существует вероятность того, что в будущей версии Grid Layout будет реализована функция subgrid ² , которая позволяет дочерним элементам элементов сетки соответствовать линиям основного контейнера.Но это предположение.И даже тогда нет никакой гарантии, что требуемая область сетки будет доступна с grid-template-areas.Он может быть доступен только при размещении на основе строки ³ .

---

Примечания:

¹ Свойства сетки не работают с элементами внутри контейнера сетки

² Позиционирование содержимого элементов сетки в первичном контейнере (функция подсетки)

³ Линейное размещение с помощью CSS Grid