嵌套 grid 需每层手动设 display: grid，grid-area 仅对直系子元素生效；subgrid 要求父容器显式定义轨道、子元素为直接子项且自身设 grid-template-rows: subgrid 和 grid-row 范围；嵌套中高度不一致需 align-items: stretch 与 grid-auto-rows: 1fr 配合。
嵌套 Grid 不是自动继承的，每一层都必须手动设 display: grid，否则子元素写的 grid-column、grid-area 全部无效。
为什么 grid-area 在孙子元素上不生效
因为 grid-template-areas 只对容器的**直系子元素**起作用。外层定义了 "header header" "nav main"，只有它的直接子元素能用 grid-area: header；孙子元素哪怕写了 grid-area: header，浏览器也完全忽略。
- 常见现象：内容堆在左上角、开发者工具里 computed 样式中
grid-area显示为auto - 错误写法：
.card__title { grid-area: header; }（.card__title 是孙子） - 正确做法：要么在 .main 内部重新声明
display: grid和自己的grid-template-areas，要么改用数值定位（如grid-row: 1）配合subgrid
subgrid 生效的三个硬性条件
subgrid 不是开关式语法，漏掉任一条件就会静默退化为普通块级流——你不会看到报错，但 computed 样式里 grid-template-rows 会显示为 none。
- 父容器必须有
display: grid且显式定义grid-template-rows或grid-template-columns（grid-auto-rows、repeat(auto-fit, ...)等隐式生成的轨道无效） - 子元素必须是父网格的**直接子项**（DOM 中不能有中间 wrapper；
display: contents也会破坏父子关系） - 子元素自身需设
display: grid+grid-template-rows: subgrid（或列）+ 显式grid-row范围（如grid-row: 1 / -1）
嵌套中尺寸失控的典型原因
父容器用 1fr 分配空间，子容器若没设高度，它的 grid-auto-rows 默认由内容撑开，不会自动继承父的行高。结果就是卡片高度不一致、底部不对齐。
- 想让所有卡片等高：在外层加
align-items: stretch，同时确保子卡片自身设grid-auto-rows: 1fr（不是依赖父的1fr） - 避免在嵌套中滥用
minmax(0, 1fr)：它可能让子容器高度塌缩，尤其当内部有overflow: hidden时 - 子容器若需响应式列数，父容器应使用
repeat(auto-fit, minmax(280px, 1fr))，而不是在子层重写grid-template-columns——后者会切断subgrid继承链
Grid 和 Flex 混合嵌套时的常见陷阱
Grid 负责区域划分，Flex 负责内部对齐，两者搭配没问题，但容易卡在高度传递上。
- Grid 项内写
display: flex却不生效？大概率是该 Grid 项本身高度为auto，导致height: 100%失效——需确保父 Grid 定义了grid-template-rows或子项设了min-height - 别在 Grid 项上同时用
align-items: stretch（默认）和 Flex 的align-items: center，前者会强制拉伸，后者可能被覆盖 - 三层以上嵌套（Grid → Flex → Grid → Flex）难调试，语义易混乱；优先扁平结构，必要时用
subgrid替代中间 Flex wrapper
最常被忽略的是：subgrid 的父轨道定义必须稳定，一旦媒体查询在子层重写 grid-template-columns，继承就断了——响应式调整只应在顶层容器做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
