所有关于CSS Grid的指南似乎都暗示了一种结构，即在网格中定位的元素是网格元素本身的直接子元素:
<div class="wrapper">
<div>A</div>
<div>B</div>
</div>
.wrapper 具有 display: grid 和对于 grid 属性的定义。
如果我想要将一个作为网格的“孙元素”定位在网格本身上（而不是依赖其父元素），这样做有意义吗？
<div class="wrapper">
<div>A</div>
<div>
<div>B</div>
<div>C</div>
</div>
</div>
我希望将A, B和C分别放在网格的不同行中，这样做有意义吗？
display: subgrid子网格提供了通过嵌套元素传递网格参数，并将基于内容的大小信息传回其父网格的能力。
如果元素是网格项（即它处于流中且其父级是网格容器），则
display: subgrid使该元素成为子网格（这是一种特殊类型的网格容器框），因此忽略其grid-template-*和grid-*-gap属性，而采用跨度的父网格轨道。网格项本身可以通过给它
display: grid来成为网格容器。在这种情况下，其内容的布局将独立于其参与的网格的布局。在某些情况下，可能需要多个网格项的内容相互对齐。一个作为网格项的网格容器可以通过使用
display: subgrid推迟其行和列的定义到其父网格容器中，从而使其成为子网格。在这种情况下，子网格的网格项参与调整父网格容器的网格大小，使两个网格的内容对齐。了解更多。
此功能尚未在主要浏览器中实现。不知道它何时会被实现。
在网格中，只有容器的流动子元素变成网格项并接受网格属性。
在网格项上使用display: subgrid，项目的子元素将遵循容器的线条。
根据Grid Level 1规范，display: subgrid已推迟到Level 2。
目前，在网格项（即嵌套网格容器）上使用display: grid可能在某些情况下很有用。
另一种可能的解决方法是display: contents。该方法在此处解释：
更多信息：
由于截至本回答撰写时，除最新的Firefox v71外的其他浏览器都不支持子网格Subgrids，即使其他浏览器开始支持它，用户使用旧版浏览器仍将被落下，至少需要等一年时间，直到足够多的用户升级浏览器以便能够使用这样的新功能。
我已经想出了一种方法，可以对祖先网格上的嵌套深度网格元素进行对齐：
从其实质上讲，此解决方案是关于将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: contents来解决它，但目前仅受到 Firefox、WebKit TP 和 Chrome 标志后面支持。 - Ilya Streltsyn