CSS subgrid

CSS 网格是一个非常强大的布局引擎，但在父网格中创建的行和列轨迹只能用于放置网格容器的直接子级。任何作者定义的已命名网格区域和线在任何其他元素上都会丢失，直接子级除外。借助 subgrid，可以与嵌套网格共享轨道大小、模板和名称。本文将介绍它的运作方式。

在 subgrid 之前，内容通常是手动定制的，以避免像这样不规则的布局。

三张卡片并排显示，每张卡片都包含三段内容：标题、段落和链接。每张卡片都有不同的文本长度，如果卡片并排显示，就会出现一些尴尬的对齐效果。

在 subgrid 之后，可以对齐大小不同的内容。

三张卡片并排显示，每张卡片都包含三段内容：标题、段落和链接。每个文本长度都不同，但 subgrid 允许每个内容项中最高的项设置行高，从而固定了对齐方式，从而修复了所有对齐问题。

浏览器支持

  • 117
  • 117
  • 71
  • 16

来源

子网格基础知识

下面是一个介绍 CSS subgrid 基础知识的简单用例。网格由两个命名列定义，第一个列宽 20ch，第二个列是空间 1fr 的“其余”。列名称不是必需的，但非常适合用于说明和指导。

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

然后，该网格的子级跨越这两列，设置为网格容器，并通过将 grid-template-columns 设置为 subgrid 来采用其父级的列。

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
CSS 网格开发者工具的屏幕截图，其中并排显示两列，列行开头有一个名称。
https://codepen.io/web-dot-dev/pen/NWezjXv

大功告成，父网格的列已经有效向下传递到子网格。现在，此 subgrid 可以向其中任一列分配子项。

挑战！重复相同的演示，但针对 grid-template-rows 执行此操作。

共享网页级“宏”网格

设计人员通常会使用共享网格，在整个设计上绘制线条，将所需的任何元素对齐。现在，网络开发者也能做到！现在可以实现这一确切工作流，以及许多其他功能。

从宏观网格到成品设计，不一而足。 系统会预先创建网格命名区域，随后根据需要放置组件。

实现最常见的设计人员网格工作流可以深入了解 subgrid 的功能、工作流和潜力。

以下是从 Chrome 开发者工具中截取的移动设备页面布局宏网格的屏幕截图。线条有名称，并且组件放置有清晰的区域。

Chrome CSS grid DevTools 的屏幕截图，其中显示了移动设备大小的网格布局，其中行和列通过命名以便快速识别：fullbleed、system-status、primary-nav、primary-header、main、footer 和 system-gestures。

以下 CSS 会创建此网格，其中包含设备布局的已命名行和列。每行和每列都有一个大小。

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

一些其他样式会提供以下设计。

与之前相同的 CSS DevTools 网格叠加层，但这次显示了一些移动设备系统界面，添加了一些阴影和一点颜色。有助于了解设计的方向

此父项中包含各种嵌套元素。该设计要求在导航行和标题行下提供全宽图片。最左边和最右边的列行名称是 fullbleed-start 和 fullbleed-end。以这种方式为网格线命名，可使子项同时与 fullbleed 的放置简写形式对齐。我们很快就会发现它非常方便。

开发者工具中网格叠加层的屏幕截图放大，尤其侧重于全出血开始和全出血结束的列名称。

使用好命名的行和列创建整体设备布局后，使用 subgrid 将命名的行和列传递给嵌套网格布局。这就是 subgrid 神奇时刻。设备布局将已命名的行和列传递给应用容器，后者随后将其传递给它的每个子级。

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

CSS subgrid 是一个用来替代网格轨迹列表的值。元素从其父项跨越的行和列现在是其提供的行和列。这样一来，.app 的子项便可以使用 .device 网格中的线条名称，而不是只有 .app 可以使用。.app 内的元素无法引用在 subgrid 之前由 .device 创建的网格轨道。

定义这些内容后，借助 subgrid，嵌套图像现在可以在布局中全幅配置。没有负面的值或技巧，而是用一行文字很好地表示：“我的布局范围从fullbleed-start到fullbleed-end。”

.app > main img {
    grid-area: fullbleed;
}
已完成的宏布局，带有一个全宽嵌套图片，该图片正确放置于主导航行和标题行，并扩展到每个全宽已命名列行。
https://codepen.io/web-dot-dev/pen/WNLyjzX

好了，设计人员使用的宏网格是在 CSS 中实现的。此概念可以根据需要随之扩展和发展。

检查支持情况

使用 CSS 和 subgrid 进行渐进式增强既熟悉又简单。 使用 @supports 并在圆括号内询问浏览器它是否将 subgrid 理解为模板列或行的值。以下示例会检查 grid-template-columns 属性是否支持 subgrid 关键字，如果为 true，则表示可以使用 subgrid

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

开发者工具

Chrome、Edge、Firefox 和 Safari 都具有出色的 CSS 网格开发者工具，而 Chrome、Edge 和 Firefox 则提供了可帮助使用 subgrid 的特定工具。Chrome 从 115 年开始宣布推出这些工具，而 Firefox 则使用这些工具已有一年或更长时间。

在“元素”面板中的元素上显示的 subgrid 标记的屏幕截图预览。

subgrid 标记的作用与网格标志类似，但能直观地区分哪些网格是子网格，哪些不是。

资源

此列表汇集了 subgrid 文章、演示和总体入门灵感。如果您正在寻找后续的 subgrid 培训，请尽情探索所有这些优质资源！

全新互操作性系列视频