此页面由 Cloud Translation API 翻译。

CSS subgrid

CSS 网格是一款非常强大的布局引擎，但在父级网格上创建的行和列轨道只能用于定位网格容器的直接子项。任何作者定义了已命名的网格区域，并且数据线在直接子级。借助 subgrid，可以共享航迹大小、模板和名称嵌套网格。本文介绍了其工作原理。

在子网格之前，内容通常需要手动调整，以避免出现此类不整齐的布局。

三张卡片并排显示，每张卡片都包含三段内容：
标题、段落和链接每个部分的文字长度不尽相同
这些卡牌紧贴在一起时可能会出现尴尬的排列情况。

subgrid 之后，可以对齐大小可变的内容。

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

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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 */
}

CSS 网格开发者工具的屏幕截图，并排显示两列，且列行的开头为名称。 — https://codepen.io/web-dot-dev/pen/NWezjXv

至此，父网格的列已有效传递到子网格下一级。此 subgrid 现在可以将子网格分配给这两个列中的任何一个。

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

共享网页级“宏”网格

设计师通常使用共享网格，在整个设计中绘制线条，将所需的任何元素与它对齐现在，网络开发者也可以做到了！这与以及许多其他功能。

从宏观网格到最终的设计。网格命名区域是预先创建的之后的组件将根据需要放置。

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

下面是从 Chrome DevTools 中截取的移动页面布局宏网格的屏幕截图。这些线条具有名称，并且有明确的组件放置区域。

答
Chrome CSS 网格开发者工具的屏幕截图，其中显示了移动设备大小的网格布局
其中，行和列的名称以快速识别：全出血、
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 开发者工具网格叠加层，但这次显示了一些移动系统界面、阴影和颜色。有助于了解

在此父元素内，包含各种嵌套元素。该设计要求使用完整的宽度图片。最左边和最右边的列行名称为 fullbleed-start 和 fullbleed-end。以这种方式命名网格线可以让子元素通过展示位置同时对齐每个元素简写共 fullbleed 个。您很快就会看到它非常方便。

答
DevTools 中网格叠加层的放大屏幕截图，重点关注了
全出血起始位置和全出血结束列名称。

在使用漂亮的命名行和列创建整体设备布局后，使用 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。“.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，

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

Devtools

Chrome、Edge、Firefox 和 Safari 都有很棒的 CSS 网格开发者工具，而 Chrome， Edge 和 Firefox 提供了一些特定工具来帮助处理 subgrid。公布 Chrome 他们的工具 115，同时 Firefox 已经使用了一年或更长时间。

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

子网格标记的运作方式与网格标记类似，但可直观区分哪些网格是子网格，哪些不是。

资源

此列表汇集了 subgrid 文章、演示和总体灵感入门指导。如果您想了解子电网的下一步举措祝您有愉快的一天！探索所有这些优质资源！