subgrid 失效的根本原因是父容器未满足硬性准入条件：必须显式定义 grid-template-columns/rows、禁用中间层 gap、确保 DOM 层级干净且子层不写独立 @media。
subgrid 本身不响应，响应逻辑必须全部放在父容器上；子层写任何 @media 切换轨道，就等于主动退出 subgrid。
为什么写了 grid-template-columns: subgrid 却没对齐？
不是语法错了，是父容器根本没给它继承的资格——subgrid 是有硬性准入条件的轨道继承指令，漏掉任一环节，浏览器就会静默丢弃整条声明。
- 父容器只写了
display: grid和gap，但没定义grid-template-columns（比如只靠grid-auto-columns或repeat(auto-fit, ...)），那子元素的subgrid就直接失效 - 开发者工具里检查 computed 样式，如果
grid-template-columns解析为none，说明已被忽略 - 父容器用了命名线（如
[main]），但子元素用数字索引（如grid-column: 2 / 3），列数一变就错位
三层嵌套时，孙辈怎么对齐顶层列线？
subgrid 只作用于直接子元素。想让孙辈穿透对齐顶层，中间层必须也是 subgrid 容器，且不能引入任何新轨道。
- 中间层（如
.card-body）必须同时声明grid-template-columns: subgrid和grid-template-rows: subgrid - 中间层禁止使用
gap；若需视觉间距，得用margin或显式padding，否则会插入隐式轨道，切断映射链 - 中间层的
grid-column必须覆盖完整跨度（如grid-column: 1 / -1），否则列索引偏移，命名线锚定失效
移动端响应式下怎么换列数？
subgrid 的响应能力完全依赖父网格驱动。子层自己加 @media，就等于放弃继承，退化成独立网格。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：在父容器上统一控制，例如
@media (max-width: 768px) { .list { grid-template-columns: 1fr; } }，子层自动跟随 - ❌ 错误：在
.product-card上写@media (max-width: 768px) { grid-template-columns: 1fr 1fr; }，computed 样式中grid-template-columns立即变成none - 若需 PC 端 4 列、移动端 2 列这种“不同粒度对齐”，不要强求单个父容器撑住所有断点，应拆成两个独立父网格容器，各自配 subgrid
最容易被忽略的是 DOM 层级干净性：哪怕中间多一层 div、一个 fieldset、或 JS 动态插入时悄悄包的 display: contents，subgrid 都会立刻失效——它不看语义，只认直接子项和显式轨道定义。
