CSS 子网格

发布时间：2023 年 9 月 28 日

CSS 网格是一个非常强大的布局引擎，但是父网格上创建的行和列轨道只能用于定位网格容器的直接子元素。任何作者定义的命名网格区域和线在直接子元素以外的任何其他元素上都会丢失。通过subgrid，轨道大小、模板和名称可以与嵌套网格共享。本文介绍了它的工作原理。

在 subgrid 之前，内容通常是手工定制的，以避免像这样的参差不齐的布局。

Three cards are shown side by side, each with three bits of content: header, paragraph and link. Each are of a different text length, creating some awkward alignments in the cards as they sit next to each other.

在 subgrid 之后，对齐可变大小的内容成为可能。

Three cards are shown side by side, each with three bits of content: header, paragraph and link. Each are of a different text length, but subgrid has fixed the alignments by allowing the tallest of each content item to set the row height, fixing any alignment issues.

浏览器支持

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

来源

Subgrid 基础知识

这是一个直接的用例，介绍了 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 */
}
A screenshot of the CSS grid DevTools, showing two columns side by side with a name at the start of their column line.
https://codepen.io/web-dot-dev/pen/NWezjXv

就是这样，父网格的列已有效地向下传递到子网格。现在，此子网格可以将子元素分配给这些列中的任何一列。

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

共享页面级“宏”网格

设计师通常使用共享网格，在整个设计上绘制线条，并将他们想要的任何元素对齐到该线条。现在 Web 开发者也可以做到！现在可以实现这种精确的工作流程，以及更多。

从宏网格到完成的设计。网格命名区域预先创建，稍后根据需要放置组件。

实施最常见的设计师网格工作流程可以为 subgrid 的功能、工作流程和潜力提供出色的见解。

这是从 Chrome DevTools 截取的移动页面布局宏网格的屏幕截图。这些线有名称，并且有用于放置组件的清晰区域。

A screenshot from Chrome CSS grid DevTools showing a mobile sized grid layout where rows and columns are named for quick identification: fullbleed, system-status, primary-nav, primary-header, main, footer and 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];
}

一些额外的样式赋予以下设计。

Same CSS DevTools grid overlay as before, but this time with some of the mobile system UI present, some shadows and a little color. Helps see where the design is going.

在这个父元素内部，有各种嵌套元素。设计需要在导航栏和标题行下方放置一个全宽图像。最左侧和最右侧的列线名称为 fullbleed-start 和 fullbleed-end。以这种方式命名网格线使子元素能够使用 placement shorthand fullbleed 同时对齐到每个线。这非常方便，您很快就会看到。

A zoomed in screenshot of the grid overlay from DevTools, focusing specifically on the fullbleed-start and fullbleed-end column names.

使用漂亮的命名行和列创建整体设备布局后，使用 subgrid 将良好命名的行和列传递到嵌套网格布局。这就是 subgrid 的神奇时刻。设备布局将命名的行和列传递给应用程序容器，然后应用程序容器将其传递给它的每个子元素。

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

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

CSS subgrid 是一个值，用于代替网格轨道的列表。 元素从其父元素跨越的行和列，现在是它提供的相同行和列。这使得 .device 网格中的线名称可用于 .app 的子元素，而不是仅用于 .app。在 subgrid 之前，.app 内部的元素无法引用 .device 创建的网格轨道。

完成所有这些定义后，由于 subgrid，嵌套图像现在能够在布局中实现全出血效果。无需负值或技巧，而是一行简洁的代码，表示“我的布局从 fullbleed-start 跨越到 fullbleed-end。”

.app > main img {
    grid-area: fullbleed;
}
The finished macro layout, complete with a full width nested image sitting properly undeath the primary nav and header rows and extending to each of the fullbleed named column lines.
https://codepen.io/web-dot-dev/pen/WNLyjzX

您已经了解了，设计师使用的宏网格，在 CSS 中实现。这个概念可以根据您的需要进行扩展和增长。

检查支持

使用 CSS 和 subgrid 进行渐进增强是熟悉且直接的。使用 @supports 并在括号内询问浏览器是否理解 subgrid 作为模板列或行的值。以下示例检查 grid-template-columns 属性是否支持 subgrid 关键字，如果为真，则表示可以使用 subgrid

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

开发者工具

Chrome、Edge、Firefox 和 Safari 都具有出色的 CSS 网格开发者工具，并且 Chrome、Edge 和 Firefox 具有用于帮助处理 subgrid 的特定工具。Chrome 在 115 版本中宣布了他们的工具，而 Firefox 已经拥有这些工具一年或更长时间了。

Screenshot preview of the subgrid badge found on elements in the Elements panel.

subgrid 徽章的作用类似于网格徽章，但在视觉上区分哪些网格是子网格，哪些不是。

资源

此列表汇编了 subgrid 文章、演示和入门的总体灵感。如果您正在寻找 subgrid 学习的下一步，请尽情探索所有这些出色的资源！