Subgrid 对齐嵌套栅格
让子级参与父栅格使列跨嵌套组件对齐。
响应式设计高级
为什么
无 subgrid，嵌套卡片重声明自己的栅格轨道并与同级漂移失对。Subgrid 使子级用父轨道，列保持对齐无论嵌套多深。
StatCounter 2024 数据显示 58% 的网络流量来自移动端。CSS 容器查询（2023 基线）和 subgrid（2024 基线）消除了大多数媒体查询 hack，减少 30-50% 的响应式 CSS。
何时使用
嵌套组件须对齐同列时用 subgrid（表单标签+输入、列表中卡片头+体）。2023 基线 Chrome/Firefox；Safari 16+。
如何做
1. 父栅格 — display: grid; grid-template-columns: 200px 1fr 100px
2. 子用 subgrid — grid-template-columns: subgrid;（继承父轨道）
3. 跨行/列 — 子上 grid-column: span 3 仍可与 subgrid 共用
4. 对齐 — 子列 1 = 父列 1，自动，无需重测
5. 回退 — @supports (grid-template-columns: subgrid) { ... } 否则重声明轨道
6. 用例 — 对齐图标的卡片列表、对齐标签的表单、栅格中表格
7. 命名 — 用父的 grid-line 名；subgrid 也继承
示例
/* 父栅格 — 3 列 */
.list { display: grid; grid-template-columns: 40px 1fr 80px; gap: 8px; }
/* 每卡片跨 3 列并用 subgrid 对齐父轨道 */
.card { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
/* 卡片的图标、体、元现在与父列精确对齐 */
.card .icon { grid-column: 1; }
.card .body { grid-column: 2; }
.card .meta { grid-column: 3; }
/* 回退 — 不支持 subgrid 处重声明轨道 */
@supports not (grid-template-columns: subgrid) {
.card { grid-template-columns: 40px 1fr 80px; gap: 8px; }
}
常见问题
- ⚠子重声明轨道 — 内容宽异于父时列漂移
- ⚠无回退 — 旧 Safari/Chrome 显示破损单列布局
- ⚠grid-column 跨错 — 子用 subgrid 但未跨父全宽
最佳实践
- ✓跨父全宽 — subgrid 子上 grid-column: 1 / -1，然后 subgrid 对齐
- ✓始终提供 @supports 回退 — 为无 subgrid 浏览器重声明轨道
- ✓用命名 grid 线 — subgrid 继承名，使子放置可读