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和{ {1}}区域？

基本上，我希望r元素的宽度是这样的：

article-overflow而现在是l x x x x x x x x x x x r

换句话说，我试图将其一个网格单元扩展到当前侧边栏使用的每个区域。

Answer 1

...有没有办法，使用网格区域的这种方法，我可以创建.article-overflow元素，它完全在c网格模板区域内扩展到{ {1}}和l区域？

没有

r元素甚至不是网格项，因此它不识别网格属性¹。

在未来版本的Grid Layout中，.article-overflow功能²可能允许网格项的子项尊重主容器的行，实施。但那是猜测。即便如此，也不能保证您想要的网格区域可用subgrid。它可能仅适用于基于行的放置 ³。

注意：

¹ Grid properties not working on elements inside grid container

² Positioning content of grid items in primary container (subgrid feature)

³ Line-based placement with CSS Grid

溢出/扩展某些元素的CSS网格区域

1 个答案: