用 subgrid 让子项对齐父网格列

卡片内部要与外层网格的列对齐，常规做法是让卡片再写一遍 grid-template-columns，列宽一改就要同步两处。subgrid 让子网格直接沿用父级的轨道定义。

没有 subgrid 时的写法

.list { display: grid; grid-template-columns: 120px 1fr 80px; }
.card { display: grid; grid-template-columns: 120px 1fr 80px; }

两处列定义保持一致才能对齐。父级改成 minmax 或加入新列时，卡片内部要跟着改，维护成本随层级增长。

改用 subgrid

.list { display: grid; grid-template-columns: 120px 1fr 80px; gap: 12px; }
.card {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

卡片先横跨整行，再把列定义交给父级。此后只改一处轨道，卡片内部自动跟随。

两个方向分别设置

grid-template-columns: subgrid 只作用于列方向，行方向仍是独立的网格。两个方向都要继承时写成 grid-template: subgrid / subgrid，或单独声明行方向。

间距的处理

子网格默认沿用父级的 gap。需要单独控制时，在子网格上重写 column-gap 与 row-gap，不写则与父级一致。

适用与不适用

兼容性处理

用 @supports 做特性检测，不支持时退回显式的列定义。

.card { grid-template-columns: 120px 1fr 80px; }
@supports (grid-template-columns: subgrid) {
  .card { grid-template-columns: subgrid; }
}