关于CSS网格的所有指南似乎都暗示了一种结构,其中位于网格中的元素是网格本身的子元素.
<div class="wrapper">
<div>A</div>
<div>B</div>
</div>
凡.wrapper具有display: grid和网格属性的定义.
如果我想在网格本身上放置一个网格的"孙子"元素(而不是依赖于它的父级？),这是否有意义？
<div class="wrapper">
<div>A</div>
<div>
<div>B</div>
<div>C</div>
</div>
</div>
在这里,我希望能够将A,B和C各自放在他们自己的网格行上; 这甚至有意义吗？
由于在撰写此答案时，在最新的Firefox v71以外的浏览器上根本不支持子网格，即使其他浏览器开始支持它，使用旧版本的用户仍将被抛在后面至少一年，直到有足够的用户升级他们的浏览器以便能够使用这样的新功能。
我设计了一种在祖先网格上对齐深层嵌套网格元素的方法：
从本质上讲，该解决方案是应用display:contents到网格的所有嵌套元素，直到希望用作网格项的元素，这有效地进行了反向继承，因此设置为的每个元素display:contents实际上都投影其子元素的显示，因此，最终深层嵌套的元素将被视为该.container元素的直接子元素。
.container {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
max-width: 500px;
margin: auto;
}
.container div{
display: contents; /* <-- makes the div elements "transparent" to the grid */
}
input{ height: 40px; }
label{ align-self: center; }<div class="container">
<div>
<div>
<div>
<label contenteditable>very long label</label>
<input>
</div>
</div>
</div>
<div>
<div>
<div>
<label contenteditable>short</label>
<input>
</div>
</div>
</div>
</div>浏览器将其视为：
<div class="container">
<label contenteditable>very long label</label>
<input>
<label contenteditable>short</label>
<input>
</div>
在上面的示例中，标签是可编辑的，以展示网格轨道的动态特性，因此所有网格项都是对齐的。
display: subgrid子网格提供通过嵌套元素向下传递网格参数的能力，并将基于内容的大小信息返回到其父网格。
如果元素是一个网格项（即它是流入的并且它的父
display: subgrid元素是一个网格容器），则使该元素成为一个子网格（它是一种特殊类型的网格容器框）并因此忽略它的grid-template-*和grid-*-gap属性以支持采用父网格跟踪它跨越的。通过给它一个网格项，它本身可以是一个网格容器
display: grid。在这种情况下，其内容的布局将独立于它参与的网格的布局。在某些情况下，多个网格项的内容可能需要相互对齐。本身是网格项的网格容器可以使用 将其行和列的定义推迟到其父网格容器
display: subgrid，使其成为子网格。在这种情况下，子网格的网格项参与调整父网格容器的网格大小，允许两个网格的内容对齐。阅读更多。
此功能尚未在主要浏览器中实现。谁知道会是什么时候。
在 Grid 中，只有容器的流入子项成为网格项并且可以接受网格属性。
随着display: subgrid在网格上项目，该项目的孩子们尊重容器的线路。
根据Grid Level 1 规范，display: subgrid已推迟到Level 2。
现在，display: grid在某些情况下，网格项（即嵌套的网格容器）可能很有用。
另一种可能的解决方法是display: contents. 该方法解释如下：
更多信息：