子网格

当您向网格容器添加display: grid时，只有直接子元素成为网格项，然后才能将其放置在您创建的网格上。这些项目的子元素以正常流显示。

您可以通过使网格项成为网格容器来“嵌套”网格。但是，这些网格相互独立，并且独立于父网格，这意味着它们不会从父网格获取其轨道大小。这使得难以将嵌套网格项与主网格对齐。

如果在grid-template-columns、grid-template-rows或两者上设置值subgrid，则嵌套网格不会创建新的轨道列表，而是使用父级上定义的轨道。

例如，如果您使用grid-template-columns: subgrid并且嵌套网格跨越父级的三个列轨道，则嵌套网格将具有与父网格相同大小的三个列轨道。间隙是继承的，但也可以使用不同的gap值覆盖。行名称可以从父级传递到子网格，子网格也可以声明自己的行名称。

在下面的示例中，我有一个网格布局，包含九个1fr列轨道和四个最小高度为 100px 的行。

我将.item放置在第 2 到第 7 列线和第 2 到第 4 行。然后我将此网格项变成一个网格，赋予它作为子网格的列轨道，并像往常一样定义行。由于该项跨越五个列轨道，这意味着子网格有五个列轨道。然后我可以在此网格上放置.subitem。

此示例中的行不是子网格，因此行为与普通嵌套网格相同。父级上的网格区域会扩展到足以容纳此嵌套网格。

请注意，行编号在子网格内重新开始——子网格内的第 1 列线是子网格的第一行。子网格化元素不会继承父网格的行号。这意味着您可以安全地布局一个可能放置在主网格上不同位置的组件，同时知道组件上的行号将始终相同。

下一个示例与之前的设置相同；但是，我们使用subgrid作为grid-template-rows的值，并定义显式列轨道。因此，列轨道表现为常规嵌套网格，但行与子项跨越的两个轨道相关联。

您可以将行和列都定义为子网格，如下例所示。这意味着您的子网格在两个维度上都与父元素的轨道数量相关联。

如果您需要自动放置项目并且不知道将有多少个项目，在创建子网格时要小心，因为它会阻止创建额外的行来容纳这些项目。

请查看下一个示例——它使用与上面示例中相同的父级和子级网格。但是，我在子网格中放了十二个项目，尝试自动放置到十个网格单元格中。由于子网格在两个维度上都存在，因此多余的两个项目无处可去，因此它们进入网格的最后一个轨道，如规范中所定义。

如果我们删除grid-template-rows值，我们将启用隐式轨道的常规创建，尽管这些轨道不会与父级的轨道对齐，但会创建所需数量的轨道。

如果您在父元素上指定了gap、column-gap或row-gap，它将传递到子网格，因此它将与父元素具有相同的轨道间距。但是，在某些情况下，您可能希望子网格轨道具有不同的间隙或没有间隙。这可以通过在子网格的网格容器上使用gap-*属性来实现。

您可以在下面的示例中看到这一点。父网格的行和列间隙为 20px。子网格的row-gap设置为0。

如果您在 Firefox 网格检查器中检查它，您可以看到网格线在间隙中心正确的位置，因此当我们将间隙设置为 0 时，它的作用类似于将负边距应用于元素，将间隙的空间返回到项目。

使用 CSS 网格时，您可以命名网格上的线，然后根据这些名称而不是线号来定位项目。父网格上的线名会传递到子网格，您可以使用它们来放置项目。在下面的示例中，我命名了父元素上的线col-start和col-end，然后使用它们来放置子项目。

您也可以在子网格上指定线名。这可以通过在subgrid关键字后添加用方括号括起来的行名列表来实现。如果您的子网格中有四行，要为它们全部命名，您可以使用语法grid-template-columns: subgrid [line1] [line2] [line3] [line4]

在子网格上指定的行将添加到父元素上指定的任何行，因此您可以使用两者之一或两者。为了演示这一点，我在下面的示例中使用父级行定位了一个项目，并使用子网格行定位了一个项目。

除了需要注意不适合子网格的项目外，子网格的行为与任何嵌套网格非常相似；唯一的区别是子网格的轨道大小是在父网格上设置的。但是，与任何嵌套网格一样，子网格中内容的大小可能会改变轨道大小，假设使用允许内容影响大小的轨道大小方法。在这种情况下，例如，自动大小的行轨道将增长以适应主网格和子网格中的内容。

由于subgrid值的作用与常规嵌套网格非常相似，因此在两者之间切换很容易。例如，如果您意识到需要一个隐式网格的行，则需要删除grid-template-rows的subgrid值，并可能为grid-auto-rows提供一个值来控制隐式轨道的尺寸。

• 视频：使用子网格布局表单和不要等待使用子网格以获得更好的卡片布局
• 你好，子网格！ 来自 CSSConf.eu 的演示文稿