Subgrid实现跨卡片对齐需父容器显式定义带命名线的行列轨道，所有中间层（含卡片）必须双轴启用subgrid且为直接子项，gap、空节点或JS插入wrapper会破坏轨道连续性。
Subgrid 能实现多卡片内部元素跨屏幕对齐，但前提是父容器必须显式定义行列轨道，且所有中间层（包括卡片自身）都得正确声明 subgrid，否则对齐链一断，整个布局就退化成各自为政的独立网格。
父容器必须用命名线 + 显式尺寸定义轨道
只写 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 是无效的——Subgrid 不认动态生成的隐式轨道。它只响应明确定义的、带命名线或具体尺寸的轨道。
- ✅ 正确：
grid-template-rows: [title] auto [content] 1fr [footer] auto，配合grid-template-columns: [icon] 60px [label] 1fr [action] max-content - ❌ 错误：
grid-template-rows: repeat(3, auto)或grid-auto-rows: auto，这些不会产生可继承的轨道 - 命名线是跨断点对齐的唯一稳定锚点；不用命名线而用数字索引（如
grid-row: 2），断点切换列数后索引立刻错位
卡片元素必须是直接子项且双轴启用 subgrid
Subgrid 只作用于父容器的**直接子元素**，且必须在需要对齐的维度上显式启用——比如要让标题/内容/按钮在行方向对齐，就得写 grid-template-rows: subgrid；列方向同理。
- ❌ 错误：
.card { display: grid; }—— 这只是新建一个独立网格，和父轨道完全无关 - ✅ 正确：
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }（假设父定义了 3 行轨道） - 如果卡片内部还要分左右两栏（比如图标+文字），还得加
grid-template-columns: subgrid，不能只开一边 - 中间层若漏写任一轴的
subgrid，孙子元素就只能对齐到中间层自己的轨道，而非顶层
gap、空节点、JS 插入 wrapper 都会悄悄破坏轨道连续性
Subgrid 对轨道连续性极其敏感。一个看似无害的 gap: 12px 或一段被忽略的换行文本节点，都会在渲染时插入隐式轨道，导致子元素锚定偏移。
- 父容器设了
gap: 20px？那子卡片必须用grid-row: span 4（而不是span 3）来覆盖 gap 占据的隐式轨道行 - 移动端慎用
visibility: hidden或opacity: 0隐藏卡片项——它们仍参与轨道计算；应统一用display: none - JS 动态插入内容时，避免多套一层无样式的 ，它会成为“幽灵轨道生成器”
- Chrome DevTools 的 Grid 面板里勾选 “Show line names”，看到实线轨道才表示命名线被真正识别；虚线或没显示，说明继承已中断
真正难控的从来不是语法，而是轨道是否连续——它不报错、不警告，只在你检查对齐效果时默默失效。调试时别只盯着 CSS 规则，先打开 Grid Inspector 确认命名线是否来自顶层容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
