subgrid是唯一能让不同卡片内元素物理对齐父网格轨道的原生方案，通过共享父容器的行/列坐标系实现跨卡片对齐；关键在于父容器显式定义带命名的grid-template-rows/columns，子元素设subgrid并配合grid-row/column指定轨道，禁用gap等破坏继承的属性。
Subgrid 是目前唯一能真正让不同卡片内元素物理对齐父网格轨道的原生方案，不需要 JS 计算高度、不依赖 min-height 硬撑、也不靠 align-self: end 在各自内部“推”——它让所有卡片共享同一套行/列坐标系。
为什么 grid-row: 3 + subgrid 能跨卡片对齐按钮
关键不在子卡片自己怎么排，而在它们都落在父网格的同一行线上。父容器定义 grid-template-rows: auto minmax(60px, 1fr) auto（头 / 主体 / 尾），每个卡片设 grid-template-rows: subgrid，按钮加 grid-row: 3，就强制钉在第三行——所有按钮自然共线。
常见错误是只在卡片内部用 display: grid; grid-template-rows: 1fr auto; align-self: end，这只能保证按钮在自己卡片里到底部，但不同卡片内容高度不同，“底部”物理位置根本不在一条线上。
- 父容器必须显式声明
grid-template-rows，不能只靠grid-auto-rows或minmax()动态生成 -
subgrid不继承gap，父容器用了gap，子卡片又没用grid-row: span 3覆盖整行，会插入隐式轨道，破坏对齐 - 浏览器不报错，但 computed 样式中
grid-template-rows显示为none，静默失效
父容器列轨道没命名，子元素 grid-column: content 就无效
想让标题块、富文本块、图片块都对齐同一列线（比如都落在 [main] 区域），父容器必须定义带命名的列轨道：grid-template-columns: [left] 1fr [main] 2fr [right] 300px。子元素仅写 grid-template-columns: subgrid 不够，还得配合 grid-column: main 才能锚定。
如果父容器只写 grid-template-columns: repeat(3, 1fr)，虽是显式列定义，但没命名线，子元素无法用语义化方式消费轨道。
- 命名线不是可选装饰，是 subgrid 跨组件对齐的通信协议
- 子元素若同时设
grid-column: main和grid-column: span 2，会覆盖命名锚定，导致错位 - 中间层（如区块容器）若加了
padding或gap，会偏移轨道映射，必须禁用
三层嵌套时孙子元素对齐中断，中间层必须双轴 subgrid
编辑器中常见结构：编辑器根容器 → 可拖拽区块（如 .block-rich-text）→ 区块内工具栏。工具栏要对齐顶层列线，中间层区块不能只是普通网格，必须同时声明：grid-template-columns: subgrid 和 grid-template-rows: subgrid。
只写一边（比如只写列 subgrid），行方向就断开；写了但中间层用了 gap 或 grid-auto-rows，就会生成隐式轨道，切断继承链。
- 中间层禁止使用任何会引入新轨道的属性：
gap、grid-row-gap、空占位<div></div> - 顶层父容器轨道需固定，避免用
repeat(auto-fit, ...)，否则中间层无法稳定继承 - Chrome/Firefox 的 Grid Inspector 中勾选 “Show line names”，能立刻确认命名线来源是否为顶层
响应式切换时 subgrid 错位，问题一定出在子层媒体查询
Subgrid 本身不响应，它只是镜像父网格。父容器在 @media 中改 grid-template-columns，子层会自动跟随。但一旦你在子元素上也写 @media (min-width: 768px) { grid-template-columns: 1fr 1fr; }，就等于主动放弃继承，变成独立网格。
需要 PC 端对齐 4 列、移动端对齐 2 列？不要强求单个 subgrid 自适应，应拆成两个独立父容器，各自定义轨道并启用 subgrid。
- 子层 media query 是最大陷阱，删掉它几乎就能解决 80% 的响应式错位
- 兼容性兜底必须关掉 subgrid：降级时，子元素需显式移除
grid-template-columns: subgrid，否则旧浏览器可能误解析 - 性能上 subgrid 继承不触发重排，比 JS 计算或
contain: layout更轻量，但前提是轨道定义足够干净
真正难的不是写出那几行 subgrid 声明，而是克制住“在子元素里再定义一遍网格”的本能——尤其当父容器轨道已存在、且命名清晰时，多写一行 grid-template-rows 就等于亲手切断对齐链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
