在主容器中放置网格项的内容（子网格功能）

Question

有关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分别放在自己的网格行中；那有道理吗？

Answer 1

display: subgrid

从 CSS Grid Level 2草案规范开始：

2.网格容器

子网格提供了通过嵌套元素向下传递网格参数的功能，并将基于内容的大小调整信息返回到其父网格。

如果该元素是网格项（即，它是流入的并且其父display: subgrid元素是网格容器），则将该元素设为子网格（这是网格容器框的一种特殊类型），因此忽略其 grid- template-*和grid-*-gap属性，而赞成采用父网格跟踪其跨度。

3.子网格

通过赋予网格项目本身，它可以成为网格容器display: grid。在这种情况下，其内容的布局将独立于其参与的网格的布局。

在某些情况下，可能有必要使多个网格项目的内容相互对齐。本身是网格项目的网格容器可以通过使用将其行和列的定义推迟到其父网格容器display: subgrid，使其成为子网格。

在这种情况下，子网格的网格项将参与父网格容器的网格大小调整，从而使两个网格的内容对齐。阅读更多。

主流浏览器尚未实现此功能。谁知道什么时候会。

在Grid中，只有容器的流入子级才成为网格项，并且可以接受网格属性。

对于display: subgrid网格项目，该项目的子项尊重容器的线条。

根据Grid Level 1规范，display:subgrid已推迟到Level 2。

目前，display: grid在某些情况下，在网格项目（即嵌套的网格容器）上可能会有用。

另一个可能的解决方法是display: contents。