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

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

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

。