CSS Subgrid嵌套卡片怎样沿用父网格的列宽怎样完成一个可复用的最小示例

做卡片墙时，最容易遇到的不是卡片本身不会排版，而是每张卡片内部的标题、说明和按钮各自使用了一套网格。文字一长，按钮就不在同一条水平线上。CSS Subgrid 的关键作用是让嵌套网格沿用父网格已经定义好的轨道，因此卡片内部不必再次猜列宽。

这篇只解决一个任务：让一组嵌套卡片继承父网格的列宽，同时保留清晰的回退方案。MDN 将 subgrid 定义为 grid-template-columns、grid-template-rows 可使用的值；它会沿用父网格的轨道尺寸，父网格的间距也会传入子网格。

先看普通嵌套 Grid 为什么会错位

普通写法把每张卡片当成独立网格，例如内部再次写 grid-template-columns: 1fr 2fr。这套比例只对当前卡片内容负责，并不知道父容器的列线在哪里。解决思路不是给每张卡片微调宽度，而是让卡片声明自己是父网格的子网格。

用 Subgrid 让卡片继承父网格列宽

下面的例子把外层网格分成六列，每个卡片跨三列；卡片内部再声明 subgrid，所以卡片里的标题、正文和按钮可以使用同一组列线。HTML 只负责表达内容层级，列宽关系交给 CSS。

导入任务
    
把字段映射和失败提示放在稳定的内容列中。
    查看详情
  
同步任务
    
即使描述更长，操作区也沿用相同的父列线。
    查看详情
  

.card-wall {
  /* 中文注释：外层先定义所有卡片共用的列轨道。 */
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  /* 中文注释：每张卡片跨三列，内部才能继承这三列的轨道尺寸。 */
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
}

.card h3,
.card p,
.card-action {
  /* 中文注释：内容都放在同一条继承列上，避免各卡片自行计算宽度。 */
  grid-column: 1 / -1;
}

.card-action {
  /* 中文注释：最后一行使用 auto，按钮会贴在卡片内容区底部。 */
  align-self: end;
}

这里最重要的是 grid-template-columns: subgrid，而不是把 repeat(3, 1fr) 再写一遍。卡片跨几列，内部就获得几条对应的父轨道；卡片移动到父网格的其他位置时，内部的列编号仍从子网格重新计算，组件更容易复用。

把间距和命名列线纳入布局约定

父网格的 gap 默认会传给子网格，但子网格可以单独覆盖 row-gap 或 column-gap。如果组件需要稳定的语义定位，还可以在父网格上命名列线，并在子网格里直接使用这些名字。

.card-wall {
  /* 中文注释：命名列线便于把卡片内容绑定到语义位置。 */
  grid-template-columns: [content-start] repeat(4, minmax(0, 1fr)) [content-end];
  column-gap: 1.25rem;
  row-gap: 1rem;
}

.card {
  /* 中文注释：列轨道来自父网格，行轨道仍由卡片自己组织。 */
  grid-template-columns: subgrid;
  grid-template-rows: auto minmax(4rem, auto) auto;
  row-gap: 0.5rem;
}

.card p {
  /* 中文注释：子元素可使用父网格传入的命名列线。 */
  grid-column: content-start / content-end;
}

需要注意的是，subgrid 只继承已经存在的父轨道。如果你在某个维度上需要数量未知的隐式轨道，就不要在该维度强行使用 subgrid，可以改回普通网格并用 grid-auto-rows 管理新增行。内容较多时，父网格的 auto 轨道仍可能被子网格内容撑高。

用回退门禁处理不支持或不适合的场景

Subgrid 已经是广泛可用的 CSS 特性，但组件库仍应明确降级路径。可以先给普通 Grid 作为基础样式，再用 @supports 在支持时覆盖列轨道。这样即使环境不识别 subgrid，卡片也不会失去基本布局。

.card {
  /* 中文注释：基础回退使用独立列，保证旧环境仍能阅读内容。 */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@supports (grid-template-columns: subgrid) {
  .card {
    /* 中文注释：支持 Subgrid 时再接入父网格列轨道。 */
    grid-template-columns: subgrid;
    gap: 0.5rem;
  }
}

@media (max-width: 42rem) {
  .card {
    /* 中文注释：窄屏让卡片独占父网格，减少横向拥挤。 */
    grid-column: 1 / -1;
  }
}

如果卡片内部只需要一列文本，或者内部项目数量会不断增加，普通 Grid 可能更简单；如果问题是多张组件的标题、正文和操作区必须共用列线，Subgrid 才是直接的选择。

快速复盘：什么时候该用 Subgrid

可以用三个问题做门禁：父网格是否已经定义了要复用的列或行；子组件是否需要和兄弟组件在同一条轨道上对齐；内容数量是否适合固定的父轨道。如果三个答案大多为“是”，就在子组件上写 grid-template-columns: subgrid，并为不支持环境保留基础 Grid。

相关问题：

• Subgrid 和普通嵌套 Grid 的核心区别是什么？
• 为什么父网格的 gap 会影响子网格，怎样只覆盖行间距？
• 卡片内容数量不固定时，应该在哪个维度放弃 Subgrid？