父容器必须显式定义grid-template-rows（如auto 1fr auto），仅设display: grid、gap或grid-auto-rows无法提供可继承的行轨道，subgrid声明将被浏览器静默丢弃。
父容器必须显式定义行轨道，不能只写 display: grid
写了 display: grid 但子卡片没对齐？大概率是父容器只设了 gap 或 grid-auto-rows，没声明 grid-template-rows。Subgrid 不继承隐式轨道，只认显式定义的行（或列）结构。
正确做法是：在卡片列表容器上，明确写出标题、内容、按钮各自占一行的轨道：
.card-list {
display: grid;
grid-template-rows: auto auto 1fr auto; /* 标题 / 副标题 / 主体 / 按钮 */
gap: 16px;
}
- 必须用
auto或minmax()，不能全用1fr——否则所有行高度被拉平，失去“按内容自适应”的前提 - 行数要覆盖所有卡片可能出现的区块，哪怕某张卡没有副标题，也要为它预留轨道位置
- 别用
repeat(4, auto)：它不生成命名线，后续锚定困难；推荐带命名的写法：grid-template-rows: [title] auto [subtitle] auto [body] 1fr [footer] auto
grid-template-rows: subgrid 必须配合 grid-row: span N
子卡片只写 grid-template-rows: subgrid 是无效的。浏览器会静默丢弃该声明，computed 样式中显示为 none，且不报错。
关键在于让卡片“占据完整轨道范围”，否则 Subgrid 无从继承：
.card {
display: grid;
grid-row: span 4; /* 必须和父容器的行数一致 */
grid-template-rows: subgrid;
}
- 如果父容器定义了 4 行轨道，
grid-row: span 4就是硬性要求；写成span 3或1 / -1都可能中断继承 - 卡片内部元素才能真正使用父级行线：
h3 { grid-row: title; }、.btn { grid-row: footer; } - 不要在卡片上加
padding或gap：它们会撑开内部空间，导致内容实际位置偏移，破坏对齐锚点
多卡片内容长度不一，为什么按钮还是错位？
常见原因不是 Subgrid 失效，而是 DOM 结构或样式干扰了轨道连续性：
- 卡片之间插入了空文本节点、注释或未隐藏的
<div></div>—— 它们会被 Grid 当作隐式子项，悄悄占用一行，让后续卡片的grid-row锚点整体下移 - 某张卡片里用了
visibility: hidden隐藏副标题，但它仍占 DOM 空间，轨道还在；应改用display: none - JS 动态渲染后没触发重排，或插入时多套了一层 wrapper（比如 Vue 的
<transition></transition>包裹），导致卡片不再是父容器的**直接子元素** - 媒体查询里在卡片上重写了
grid-template-rows—— 一旦子元素自己定义了行结构，Subgrid 继承链立刻断裂
移动端响应式切换后 Subgrid 突然失效
Subgrid 的继承链非常脆弱，响应式调整必须全部收束到父容器层级：
- ✅ 正确：
@media (max-width: 768px) { .card-list { grid-template-rows: [title] auto [footer] auto; } }（删减轨道，但保持命名和显式声明） - ❌ 错误：
@media (max-width: 768px) { .card { grid-template-rows: auto auto; } }（子元素主动定义，继承终止） - 小屏下若需折叠部分区块，优先用
display: none控制子元素显隐，而不是靠grid-row: span 2动态合并行——后者会让轨道索引错乱 - Chrome DevTools 的 Grid Inspector 要打开“Show line names”，才能确认命名线是否真实存在；仅看“Grid”面板里的虚线不够，得看到
[title]这类标识才算到位
真正难控的从来不是语法，而是轨道是否连续。一个没注意到的 gap: 4px、一段被忽略的空格文本、甚至 SSR 渲染时多输出的换行符，都可能让整排按钮滑出预期位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
