subgrid跨断点对齐需父容器在媒体查询中显式定义带命名线的轨道，子元素禁用grid-template-*覆盖、禁用gap和padding干扰，仅用subgrid和命名线锚定。
subgrid 能跨断点对齐，前提是响应式调整只发生在父容器上；一旦子元素自己写 @media 重定义 grid-template-columns 或 grid-template-rows，继承链就断了——浏览器不会报错，但 computed 样式里 grid-template-rows 会显示为 none，静默失效。
父容器必须在媒体查询中显式重定义轨道，不能只靠 auto-fit
很多人以为用 repeat(auto-fit, minmax(250px, 1fr))) 就能自动适配，但 subgrid 不继承动态生成的轨道。它只认明确定义的、带具体尺寸或命名线的轨道。
- ✅ 正确：父容器在
@media (min-width: 768px)里写grid-template-columns: [left] 1fr [main] 2fr [right] 300px - ❌ 错误：父容器写
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，哪怕加了@media也无效 - ⚠️ 验证方式：Chrome DevTools → Layout 面板 → 勾选 “Show line names”，看到实线轨道才表示被
subgrid正确识别
子元素禁止在断点里覆盖 grid-template-* 声明
子卡片或区块若在自己的 @media 规则里写了 grid-template-columns: 1fr 1fr，等于主动切断继承。它不会“同步”父级变化，只会固守自己声明的值。
- 子元素只需保持
grid-template-columns: subgrid和grid-column: main这类锚定语句，其余全交给父容器 - 如果加了 fallback（如旧浏览器用
display: flex），务必在支持subgrid的分支里移除子元素的任何grid-template-*覆盖 - 中间层容器（如
.block-rich-text）若也写了断点规则，同样会中断孙子层对顶层轨道的访问
命名线是跨断点对齐的唯一通信协议
没有命名线，subgrid 只能按数字索引（如 grid-column: 2）对齐，但断点切换列数后，索引会错位。命名线才是稳定锚点。
- 父容器必须用方括号定义线名：
grid-template-columns: [start] 1fr [content] 2fr [end] - 子元素用
grid-column: content消费，而不是grid-column: 2 / 3 - 子元素若同时写
grid-column: content和grid-column: span 2，后者会覆盖前者，导致脱离命名线 - 三层嵌套时，中间层必须双轴启用
subgrid（即同时写grid-template-columns: subgrid和grid-template-rows: subgrid），否则命名线无法穿透
gap 和 padding 是静默破坏者
subgrid 不继承 gap，但父容器用了 gap，而子元素没用 grid-column: span N 覆盖整行/整列，就会插入隐式轨道——视觉上看似正常，实际坐标系已偏移。
- 父容器设了
gap: 1rem，子卡片必须用grid-column: span 3（假设父有 3 列）来填满，否则中间会多出一条不可见的隐式轨道 - 中间层容器加了
padding或margin，也会导致其子元素的轨道映射整体偏移，必须禁用 - 子元素内部若用
align-self: end或margin-top: auto做底部对齐，只是在自己局部生效，和跨卡片对齐无关——真正有效的是让所有按钮都落在父网格的同一行线，比如grid-row: 3
复杂点不在怎么写，而在怎么「不写」：别让子元素自己定义轨道、别在中间层加 gap、别用数字索引代替命名线——这些看似省事的操作，都会让跨断点对齐在某个分辨率下突然失效，且难以调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
