subgrid 仅在父容器显式定义 grid-template-rows/columns 时有效，否则计算值为 none；必须避免子元素媒体查询覆盖、中间层非透明布局及未对齐命名线等问题。
父容器没定义 grid-template-rows/columns，subgrid 就是无效的
很多人写了 grid-template-columns: subgrid 却没效果，打开 DevTools 发现 computed 样式里 grid-template-columns 是 none。这不是浏览器 bug，而是规范强制要求：subgrid 只继承“已声明”的轨道线，不推导、不猜测、不 fallback。
常见错误包括：
- 只靠
grid-auto-columns: minmax(200px, 1fr)或grid-auto-flow: column—— 这些不产生可继承的轨道线 - 用
repeat(auto-fit, ...)直接写在父容器上，但没配合显式命名或固定列数，导致 subgrid 无法映射到稳定列线 - 父容器用了
gap，而子元素又没用grid-column: span N覆盖完整跨度，隐式插入的 gap 行会切断轨道连续性
✅ 正确做法：父容器必须写明具体轨道，例如：grid-template-columns: [label] max-content [input] 1fr 或 grid-template-rows: auto minmax(60px, 1fr) auto。验证方式：Chrome DevTools Layout 面板勾选 “Show line names”，看是否有实线轨道被标出。
子元素写了 media query 就等于主动切断继承链
响应式中断最常发生的原因，不是 subgrid 不支持断点，而是子元素自己加了 @media 并重写了 grid-template-columns。一旦这么做，它就不再读父级当前生效的轨道，而是用自己的值覆盖继承。
立即学习“前端免费学习笔记（深入）”；
典型错误场景：
- 父容器在
@media (min-width: 768px)里把列数从 1 改成 3 - 子卡片却在同一断点里写了
grid-template-columns: 1fr 1fr—— 这直接让 subgrid 失效 - 为兼容旧浏览器写了
@supports not (grid-template-columns: subgrid)fallback，却忘记在支持分支里移除子元素的 fallback 网格定义
✅ 推荐结构：所有响应式轨道调整只放在父容器；子元素保持纯 grid-template-columns: subgrid，不加任何媒体查询。想弹性列？用 repeat(auto-fit, minmax(280px, 1fr)))，让父容器输出逻辑列数，子网格始终能继承有意义的列线。
三层嵌套时孙子对齐的是中间层，不是顶层
subgrid 只作用于直接子元素。如果表单里有 .form → .field-group → .form-row → input，那 input 对齐的是 .form-row 的轨道（如果它设了 grid），而不是最外层 .form 的轨道。
要穿透三层对齐，必须保证中间层“透明”：
-
.field-group和.form-row都得同时声明grid-template-columns: subgrid和grid-template-rows: subgrid - 中间层禁止用
gap、grid-auto-rows、空<div></div>或grid-column: span 2—— 这些都会生成隐式轨道，破坏映射链 - 命名线以父级为准：子层重复定义
[label]会被静默丢弃，grid-column: label始终锚定顶层定义的线
调试时务必打开 Chrome/Firefox Grid Inspector，勾选 “Show line names”，一眼就能看出哪一层的线没被继承。
跨卡片底部对齐不能靠 align-self，得靠 grid-row 锚定父行线
想让所有卡片里的“购买按钮”落在同一水平线，关键不是控制单张卡片内部，而是让它们都落在父网格的第三行。内部用 align-self: end 或 margin-top: auto 只能保证单卡内有效，跨卡毫无意义。
正确逻辑：
- 父容器设
grid-template-rows: auto minmax(60px, 1fr) auto - 每张卡片设
grid-template-rows: subgrid+grid-row: span 3 - 按钮加
grid-row: 3，直接锚定父级第三行线
这种对齐本质是坐标复用，不是拉伸或计算。性能上比 JS resize 监听轻量得多，但前提是别用 media query 主动破坏它 —— 那等于把坐标系拆了重画。
