CSS 网格布局在父 div 上，我也想在子 div 上使用它答案

【问题标题】：CSS grid layout is on parent div, I want to use it on a child div as wellCSS 网格布局在父 div 上，我也想在子 div 上使用它
【发布时间】：2018-04-30 04:23:18
【问题描述】：

在这个项目中，我将 fullPage 与 CSS 网格布局相结合。

我目前在第一个 div 上定义了一个名为“section”的网格，但也希望“slide”div 的内容符合这个相同的网格。

下面是层次结构。

<div class="section">
    <div class="fp slides">
        <div class="slides container">
            <div class="slide>

为了澄清，我还在问题被隔离的地方创建了a pen。

目前，CSS 网格自动放置在第一个表格单元格（第 1 行，第 1 列）中的 puts“fp 幻灯片”以及它的子项拥有的所有内容（h1、h2、p 和 h3）。它应该使用所有可用的行/列。

我尝试将“fp 幻灯片”的网格区域设置为所有 6 个单元格，但这不会保留行和列，只是将“幻灯片”中的所有内容放在彼此下方。

是否有一个 CSS 网格布局选项可以实现这一点？

【问题讨论】：

听起来你在关注display:sub-grid，但不幸的是，目前任何浏览器都不支持。
子网格适用于当您想要另一个网格中的网格时。我只想让我的网格延续到子 div 的。
很公平......事实是我怀疑......你不能。这不是网格的工作方式。也许是一个适当的简化案例演示，而不是链接到该站点。
我在这里用缩小的大小写了一支笔：codepen.io/sneakyvince/pen/wPrbyB
可能是这样的？ codepen.io/anon/pen/GOOREZ

标签： html css fullpage.js css-grid

【解决方案1】：

您可以将不应包含在网格中的子项标记为display: contents。这或多或少地将它们带出 DOM，因此它们的子项被视为网格项。但请注意，这也会删除其他样式，例如背景。您只能设置网格项的样式。

不幸的是，Edge 尚不支持此功能。但你可以为 here 的功能投票。

我已将pen 更新为：

.fp-slides, .fp-slidesContainer, .slide {
  display: contents;
}

【讨论】：