CSS subgrid

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

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

三张卡片并排显示，每张卡片都包含三位内容：标题、段落和链接。每张卡片的文本长度各不相同，因此当它们并排显示时，会在卡片中造成一些不协调的对齐。

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

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

浏览器支持

  • Chrome：117。
  • Edge：117。
  • Firefox：71.
  • Safari：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 网格开发者工具的屏幕截图，显示了移动设备大小的网格布局，其中行和列已命名以便快速识别：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 开发者工具网格叠加层与之前相同，但这次会显示一些移动系统界面、一些阴影和一点颜色。有助于了解设计的发展方向

在此父元素内，包含各种嵌套元素。该设计要求在导航行和标题行下方提供全宽图片。最左侧和最右侧的列线名称分别为 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 是一个用于替代网格轨迹列表的值。元素从其父级跨越的行和列现在与其提供的行和列相同。这样一来，.device 网格中的线条名称便可供 .app 的子级使用，而不仅仅是 .app。.app 中的元素无法在子网格之前引用由 .device 创建的网格轨道。

完成上述所有定义后，由于 subgrid，嵌套图片现在能够在布局中全宽配置。没有负值或技巧，而是一行代码就足以说明“我的布局从 fullbleed-start 延伸到 fullbleed-end”。

.app > main img {
    grid-area: fullbleed;
}
完成的宏布局，其中包含一个全宽嵌套图片，该图片位于主导航栏和标题行下方，并延伸到每个全出血命名列线。
https://codepen.io/web-dot-dev/pen/WNLyjzX

就是这样，设计人员使用的宏网格是在 CSS 中实现的。此概念可以根据需要根据您的需求进行扩展和扩展。

检查支持情况

使用 CSS 和子网格进行渐进式增强非常简单易行。 使用 @supports，并在括号内询问浏览器是否将子网格视为模板列或行的值。以下示例检查 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，哪些不是。

资源

此列表汇集了有关子网格的文章、演示和整体灵感，可帮助您轻松上手。如果您希望进一步了解子网格，欢迎探索这些实用资源！