CSS subgrid怎么配置或排查

CSS subgrid 不是把任意嵌套元素自动拉到外层网格上，而是让一个已经成为 Grid 容器的子项，在列或行方向复用父级网格轨道。最小写法是：父级先定义轨道，子项再写 display: grid 和 grid-template-columns: subgrid。如果页面出现卡片标题、正文和按钮左右不齐，优先检查这两层关系。

CSS subgrid的最小配置：先让子组件接上父级轨道

下面的例子让卡片内部的标题和内容共享外层三列。grid-column: span 3 决定卡片覆盖几条父级轨道，subgrid 才知道要复用哪一段列定义。

.layout {
  /* 父级先给出可被子组件复用的显式列轨道 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  /* 卡片是父级网格的直接子项，并跨过三列 */
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
}

.card-title {
  /* 子项使用卡片内部从 1 开始的网格线 */
  grid-column: 1 / 3;
}

这里的列线编号会在卡片内部重新从 1 计算，不等于外层页面的绝对编号。也就是说，组件移动到外层的其他位置后，grid-column: 1 / 3 仍指向卡片自己的前两条子网格线。

列和行要不要一起继承，取决于组件的对齐目标

只需要让多张卡片的标签列对齐，就写列 subgrid；要让标题、摘要和底部操作区也共享外层行高，才写行 subgrid。两者可同时使用：

.panel {
  /* 让卡片同时复用父级的列轨道和行轨道 */
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

父级的 gap 会参与 subgrid 的间距关系，但子网格可以重新设置 gap。调试时不要把“轨道没接上”和“间距不同”混为一谈。

subgrid不生效时，按边界逐层排查

第一层看父级：子项必须直接放在 display: grid 的容器里；如果中间多套了一层普通元素，subgrid 连接对象就变了。第二层看轴向：只写了 grid-template-columns: subgrid，行方向当然不会继承。

第三层看格式化上下文。规范规定，没有父级网格，或元素因绝对定位、布局隔离等原因建立独立格式化上下文时，subgrid 会按普通网格处理。第四层看轨道数量：子网格在继承轴上的显式轨道数由它跨越的父级轨道决定；把 4 个子项塞进只跨 3 个父级行的 subgrid，额外内容不会像普通网格那样任意生成对齐行。

浏览器开发者工具里打开网格叠加层，观察父级与子级的线是否重合，再临时给父级、subgrid 容器和子项加不同颜色边框。这个顺序比连续修改 gap、width 更容易定位根因。

一份可复用的排查清单与兼容回退

• 父级是否真的有 display: grid，subgrid 容器是否是直接网格项？
• 目标是列还是行，是否把 subgrid 写在对应轴的 template 属性上？
• grid-column 或 grid-row 跨越范围是否覆盖了预期轨道？
• 是否因独立格式化上下文、绝对定位或自动放置导致继承关系中断？
• 目标浏览器是否支持 subgrid；不支持时是否提供普通列定义作为回退？

回退可以写在 subgrid 之前，让旧环境先获得一个可用的独立布局：

.card {
  /* 旧环境先使用本地列定义，保证内容仍可读 */
  display: grid;
  grid-template-columns: 1fr 2fr;
}

@supports (grid-template-columns: subgrid) {
  .card {
    /* 支持 subgrid 时再接入父级列轨道 */
    grid-template-columns: subgrid;
  }
}

常见问题

subgrid 能直接继承祖父级网格吗？

不能跨过当前父级直接取祖父级轨道。要让关系成立，当前子网格必须接入它所在父级提供的网格。

只写 display:grid 为什么还是不对齐？

display:grid 只建立独立网格；需要在目标轴写 grid-template-columns: subgrid 或 grid-template-rows: subgrid。

subgrid 会自动创建更多行吗？

在被 subgrid 继承的轴上，不要假定会像普通网格一样无限补齐对齐轨道。先确认父级跨度，再决定是否把该轴改回普通轨道。

gap 不一致是不是 subgrid 失效？

不一定。gap 可以在子网格中覆盖；先看网格线是否建立对应关系，再单独处理间距。