### [用 subgrid 让子项对齐父网格列](https://www.huociguo.com/article/1610)

**Published:** 2026-10-02T03:57:36

**Author:** 米了

**Excerpt:** 卡片内部要与外层网格的列对齐，常规做法是让卡片再写一遍 grid-template-columns，列宽一改就…

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

![坐在桌边使用笔记本电脑的人](https://api.huociguo.com/wp-content/uploads/2026/10/d18.jpg)

子网格的列定义可以交给父级统一管理

## 没有 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; }
}
```

**Tags:** CSS Grid, subgrid, 列宽对齐, 子网格, 网格继承

**Categories:** HTML5

---