subgrid跨断点对齐需父容器在媒体查询中显式定义带命名线的轨道，子元素禁用grid-template-*覆盖、gap和padding；错误使用auto-fit或子层断点会导致静默失效。
Subgrid 本身不响应断点，它只镜像父网格的轨道；跨断点对齐能成立的唯一前提是：所有响应式调整必须集中在父容器上，且轨道定义必须显式、带命名线、禁用 auto-fit 和 gap 干扰。
父容器必须在媒体查询中重定义显式命名轨道
Subgrid 不继承 repeat(auto-fit, minmax(250px, 1fr))) 这类动态生成的轨道——浏览器计算后没有稳定列索引，subgrid 就静默失效（DevTools 中 grid-template-columns 显示为 none）。
- ✅ 正确写法：
@media (min-width: 768px) { .grid { grid-template-columns: [start] 1fr [main] 2fr [sidebar] 300px [end]; } } - ❌ 错误写法：
@media (min-width: 768px) { .grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))); } } - 验证方式：Chrome DevTools → Layout 面板 → 勾选 “Show line names”，看到实线+命名才表示被识别
子元素禁止在断点里覆盖 grid-template-columns
一旦子元素（比如卡片、富文本块）自己写 @media 改 grid-template-columns，就等于主动切断继承链——它不再“看”父级轨道，而是固守自己声明的值，subgrid 彻底退化。
- 子元素只需保持：
display: grid; grid-template-columns: subgrid; grid-column: main; - 若需 fallback（如旧浏览器用
display: flex），必须确保支持subgrid的分支里完全移除任何grid-template-*声明 - 中间层容器（如
.block-rich-text）若也加了断点规则，会直接阻断孙子层对顶层轨道的访问
命名线是跨断点对齐的唯一可靠锚点
不用命名线，只靠数字索引（如 grid-column: 2 / 4）在断点切换列数后必然错位；命名线才是穿透媒体查询的通信协议。
- 父容器必须用方括号定义：
grid-template-columns: [left] 1fr [content] 2fr [right] 300px; - 子元素消费时用：
grid-column: content;，不是grid-column: 2 / 3 - 注意冲突：若同时写
grid-column: content和grid-column: span 2，后者会覆盖前者，导致脱离命名线
gap 和 padding 是静默破坏者
父容器用了 gap，而子元素没用 grid-column: span N 覆盖整行/整列，浏览器会插入隐式轨道——视觉看似正常，但基线已偏移，subgrid 对齐实际失效。
- 解决方案：父容器统一控制
gap，子元素内部禁用gap、禁用额外padding（尤其左右内边距） - 三层嵌套时，中间层必须双轴启用：
grid-template-columns: subgrid; grid-template-rows: subgrid;，缺一不可 - 中间层若引入空
<div></div>或设grid-auto-rows，也会生成隐式轨道，中断映射链
真正难的不是写对语法，而是克制——忍住不在子层加断点、忍住不给中间层加 gap、忍住不依赖数字索引。Subgrid 的稳定性，全系于父容器轨道定义的纯粹性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
