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 draft spec：

2. Grid Containers

Subgrids提供了通过嵌套元素向下传递网格参数的功能，以及基于内容的大小调整信息备份到其父网格。

如果元素是网格项（即它是in-flow且其父元素是a   网格容器），display: subgrid使元素成为子网格（这是一个   特殊类型的网格容器盒）并因此忽略它   grid-template-*和grid-*-gap属性赞成采用   父网格跟踪它跨越。

3. Subgrids

网格项本身可以是网格容器，只需提供display: grid即可。在这种情况下，其内容的布局将独立于其参与的网格布局。

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

在这种情况下，子网格的网格项参与调整父网格容器的网格大小，允许两个网格的内容对齐。 Read more.

此功能尚未在主流浏览器中实施。谁知道它什么时候会发生。

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

在网格项上使用display: subgrid时，项目的子项遵循容器的行。

根据Grid Level 1 spec，display: subgrid已被推迟到Level 2。

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

另一种可行的解决方法是display: contents。这个方法在这里解释：

What is an alternative to css subgrid?

更多信息：

在主容器中定位网格项的内容（子网格功能）

1 个答案:

`display: subgrid`