在构建商品卡片列表时，一个常见需求是让每张卡片内部的标题、图片和价格区域在整行中保持对齐。传统做法是给每张卡片设置固定的高度或使用嵌套网格，但内容长度不一致时，卡片内部元素往往无法与相邻卡片对齐。开发者不得不通过测量像素、硬编码尺寸来“微调”，这些硬编码的数值就是所谓的“魔法数字”。CSS Subgrid 的出现，让子网格能够继承父网格的轨道定义，从根本上解决了嵌套网格的对齐难题。
嵌套网格的独立轨道与对齐困境
CSS Grid 允许将一个网格项设置为 display: grid，从而创建嵌套网格。例如，一个商品卡片列表的外层网格定义了列轨道，每张卡片作为网格项，内部又创建一个网格来排列标题、图片和价格。问题在于，嵌套网格的轨道尺寸是独立计算的，它与父网格的轨道没有任何关系。
当卡片内容长度不同时，外层网格的行轨道会根据内容自动调整，但每张卡片内部的行轨道是独立计算的。比如，卡片 A 的标题较长，卡片 B 的标题较短，如果卡片内部的行轨道是 auto，那么两卡片的标题区域高度可能不同，导致下方的图片和价格区域无法对齐。
为了强制对齐，开发者通常会给卡片设置一个固定的高度，或者给内部元素设置固定的 min-height。这些数值需要根据最长的内容来估算，一旦内容变化，数值就需要重新调整。这种依赖魔法数字的做法，不仅维护困难，而且在响应式布局中容易失效，因为不同屏幕尺寸下内容换行情况不同。
subgrid 的轨道继承机制
Subgrid 是 CSS Grid Layout Module Level 2 引入的一个新值，可以用于 grid-template-columns 和 grid-template-rows。当网格项设置 grid-template-rows: subgrid 时，它不再定义自己的行轨道，而是继承父网格中它所跨越的行轨道。
具体来说，如果父网格定义了三列轨道，一个网格项跨越了这三列，并设置 grid-template-columns: subgrid，那么该网格项内部的子元素就可以直接使用父网格的列轨道进行定位，列线编号从子网格的第一条线重新开始。
这种继承机制的关键在于，子网格的轨道尺寸由父网格的轨道尺寸决定，而父网格的轨道尺寸又由所有跨越该轨道的网格项的内容共同决定。这意味着，如果一行中有多张卡片，每张卡片的内部内容都会影响父网格行轨道的高度，从而让所有卡片在相同位置对齐。
卡片列表场景：从魔法数字到 subgrid
回到商品卡片列表的例子。假设外层网格有三列，每张卡片内部需要三行：标题、图片、价格。传统做法是给卡片设置固定的高度，比如 height: 400px，然后内部使用 display: flex 或嵌套网格来分配空间。但一旦某张卡片的标题过长，固定高度会导致内容溢出或空白。
使用 subgrid 后，外层网格定义行轨道为 auto，每张卡片设置 grid-template-rows: subgrid 并跨越三行。这样，每张卡片的内部行轨道都由父网格的行轨道决定，而父网格的行轨道会根据所有卡片的内容自动调整。例如，如果卡片 A 的标题很长，父网格的第一行轨道就会变高，所有卡片的标题区域都会随之变高，图片和价格区域自然对齐。
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
gap: 0.5rem;
}在这个示例中，.card 作为网格项，跨越了三行，并声明 grid-template-rows: subgrid。这样，.card 内部的子元素（如标题、图片、价格）就可以通过 grid-row: 1、grid-row: 2、grid-row: 3 来定位，而这些行轨道与父网格的行轨道完全一致。
单轴 subgrid 与双轴 subgrid 的取舍
subgrid 可以只应用于行或列，也可以同时应用于两者。在卡片列表场景中，通常只需要行 subgrid，因为列轨道已经由外层网格定义，卡片内部不需要再细分列。但有些场景需要双轴 subgrid，例如一个复杂的数据表格，表头分组和单元格需要同时对齐行和列。
单轴 subgrid 的优点是实现简单，且不会影响父网格的列轨道。双轴 subgrid 则会让子网格完全融入父网格的轨道系统，但需要注意，子网格的轨道数量必须与它跨越的父网格轨道数量一致，否则多余或不足的轨道会引发布局错误。
选择单轴还是双轴，取决于内部元素是否需要独立于父网格的轨道。如果内部元素只需要在行方向对齐，单轴就足够；如果内部元素需要同时在行和列方向对齐，双轴更合适。
与 display: contents 的对比
在 subgrid 出现之前，开发者常用 display: contents 来让子元素参与父网格的布局。display: contents 会让元素自身的盒子消失，其子元素成为父网格的网格项。例如，将卡片容器设置为 display: contents，卡片的内部元素就会直接成为外层网格的网格项，从而可以使用父网格的轨道。
但 display: contents 有一个关键限制：它会让元素自身的背景、边框、内边距等样式失效，因为这些样式依赖于盒子的存在。在卡片场景中，如果卡片需要背景色或边框，使用 display: contents 就无法实现。此外，display: contents 会改变 DOM 的层级关系，可能影响可访问性和屏幕阅读器的解析。
相比之下，subgrid 保留了元素自身的盒子，因此可以正常设置背景、边框等样式，同时让内部元素继承父网格的轨道。这使得 subgrid 在视觉上更灵活，且不会破坏语义结构。
以下表格对比了 subgrid、嵌套网格和 display: contents 在关键维度上的差异：
| 维度 | subgrid | 嵌套网格 | display: contents |
|---|---|---|---|
| 轨道继承 | 继承父网格轨道 | 独立轨道 | 子元素直接参与父网格 |
| 元素自身盒子 | 保留 | 保留 | 消失 |
| 背景/边框 | 可设置 | 可设置 | 不可设置 |
| 对齐能力 | 与父网格完全对齐 | 需手动对齐 | 与父网格完全对齐 |
| 语义影响 | 无 | 无 | 可能影响可访问性 |
| 浏览器支持 | 现代浏览器（2023年起） | 所有支持 Grid 的浏览器 | 所有支持 Grid 的浏览器 |
适用边界与降级方案
subgrid 虽然强大，但并非所有场景都适用。首先，subgrid 要求父网格必须是一个显式定义的网格，如果父网格使用 auto 轨道或隐式轨道，subgrid 的行为可能不符合预期。其次，subgrid 的轨道数量必须与它跨越的父网格轨道数量一致，否则无法正确继承。
浏览器支持方面，subgrid 自 2023 年 9 月起在主流浏览器中广泛可用，包括 Chrome、Firefox、Edge 和 Safari 16+。对于不支持 subgrid 的旧浏览器，可以使用 @supports 进行特性检测，并提供降级方案。例如，在卡片场景中，可以先定义一组固定的行轨道作为基础布局，然后在支持 subgrid 的环境中覆盖为 subgrid：
.card {
display: grid;
grid-template-rows: auto 1fr auto; /* 基础布局 */
}
@supports (grid-template-rows: subgrid) {
.card {
grid-template-rows: subgrid;
grid-row: span 3;
}
}这样，在不支持 subgrid 的浏览器中，卡片仍然有合理的布局，只是内部对齐可能不如 subgrid 精确。
实际应用中的注意事项
在实际项目中，使用 subgrid 需要注意以下几点：
- 控制嵌套层级，避免过度使用 subgrid 导致性能问题。虽然 subgrid 的继承机制在大多数情况下性能良好，但过深的嵌套会增加布局计算的开销。
- 保持 HTML 结构的语义化，不要为了使用 subgrid 而改变 DOM 结构。subgrid 允许元素保持原有的层级，因此应优先利用这一特性。
- 在响应式设计中，subgrid 的轨道继承会随着父网格的轨道变化而自动调整，但需要注意断点处的布局变化，确保 subgrid 的跨度与父网格的轨道数量匹配。
- 测试不同屏幕尺寸和设备，因为 subgrid 的行为可能受到滚动条、缩放等因素的影响。
以下流程图展示了 subgrid 在卡片列表中的布局计算过程：
flowchart TD
A[外层网格定义列轨道] --> B[卡片作为网格项跨越三行]
B --> C{是否设置 subgrid?}
C -->|是| D[卡片内部行轨道继承父网格]
C -->|否| E[卡片内部独立计算行轨道]
D --> F[父网格行轨道根据所有卡片内容调整]
E --> G[卡片内部高度不一致]
F --> H[所有卡片内部对齐]
G --> I[需要魔法数字强制对齐]
在这个流程中，外层网格的列轨道是固定的，卡片跨越三行。如果设置了 subgrid，卡片内部的行轨道由父网格决定，父网格的行轨道会根据所有卡片的内容自动调整，从而实现对齐。如果没有设置 subgrid，卡片内部的行轨道独立计算，可能导致高度不一致，开发者不得不使用魔法数字来修正。
结语
CSS Subgrid 通过轨道继承机制，让嵌套网格不再需要魔法数字来对齐。它保留了元素自身的盒子，同时让内部元素与父网格的轨道保持一致，适用于卡片列表、表单布局、数据表格等多种场景。与 display: contents 相比，subgrid 在视觉和语义上更具优势，但需要关注浏览器支持情况，并设计合理的降级方案。在实际项目中，合理使用 subgrid 可以显著减少布局维护成本，提升响应式设计的灵活性。