CSS Subgrid — CSS Grid 的第二级

网格布局即将迎来一些令人惊喜的变化。CSS 网格的二级规范，即CSS Subgrid，即将登陆浏览器，它将把原本就很棒的 CSS 网格提升到一个全新的高度。

有什么好大惊小怪的？

最近，我偶然看到了Rachel Andrew的文章，她在其中介绍了 CSS Subgrid，我对 CSS Subgrid 带来的可能性感到非常兴奋和激动。

简而言之，CSS Subgrid 使得在 CSS Grid 中构建嵌套网格成为可能。

目前（没有子网格），嵌套网格的轨道与父网格上的轨道没有任何关系。简单来说——我们有一个具有display: grid属性的父容器，因此它的子项成为网格项。这些网格项也可以成为网格容器。但是，父网格容器定义的网格轨道不会与子网格容器的网格轨道对齐，因为它们都独立于父网格容器内容的布局。在某些情况下，多个网格项的内容和布局需要相互对齐。

使用 CSS Subgrid，网格容器可以通过将网格项设为子网格，从其父网格容器继承行和列的定义。子网格能够将网格的属性传递给其嵌套元素，并将基于内容的尺寸信息传递回父网格。

CSS Subgrid 的两个主要优势是：

• 子网格可以使用父网格上定义的网格轨道 - 用于行、列或两者。
• 子网格也会继承父网格的间距。子网格中项目的大小可以改变父网格轨道的大小。

以下是嵌套网格如何在没有子网格的情况下工作的示例 -

但是，如果我们希望嵌套网格项的轨道与父网格的轨道对齐，该怎么办？

这时，subgrid 就派上用场了。当我们将该属性添加grid-template-rows: subgrid到嵌套的网格项时，它们会继承父网格的 row 属性，并自动相互对齐。

如果应用了该属性，它应该是这样的。

注意：目前，没有浏览器支持子网格，因此我创建了一个插图来解释该行为。

列和行的子网格

在这种情况下，子网格将同时位于列和行上。这意味着两个维度都与父网格的轨道对齐。

仅适用于列的子网格

在这种情况下，子网格用于列，这意味着网格项中将有一个单独的行隐式轨道，但其列轨道与父网格对齐。

仅限行的子网格

在这种情况下，子网格应用于行，与父网格的行轨道对齐，但其列大小与父网格无关。

资源

CSS 网格级别 2：子
网格全面到来
CSS 网格布局模块级别 2
为什么我们需要 CSS 子网格

我热切地等待浏览器支持子网格（希望很快），这样我就可以试用它并找出有趣的用例。

有反馈吗？请留言 :)