时间戳

首页 > 解决方案 > 溢出/扩展某些元素的 CSS 网格区域

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

问题描述

我正在学习 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

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

标签： csscss-grid

解决方案

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

不。

该.article-overflow元素甚至不是网格项，因此它无法识别网格属性1。

在网格布局的未来版本中，可能会实现subgrid功能2，该功能允许网格项的子项尊重主容器的行。但那是猜测。即使那样，也不能保证您想要的网格区域将可用grid-template-areas. 它可能仅适用于基于行的放置 3。

笔记：

1 网格属性不适用于网格容器内的元素

2 主容器中网格项的定位内容（子网格特征）

3 使用 CSS Grid 的基于行的放置

推荐阅读