嵌套 Grid 不会自动继承父容器轨道、区域名或对齐规则，每层必须显式设置 display: grid 才能启用独立网格上下文；grid-template-areas 仅限声明容器内生效，fr 单位依赖父容器明确尺寸，subgrid 仅对直接子元素有效且需同时满足父显式轨道、子为直接项、子设 display: grid 及显式 subgrid 声明。
嵌套 Grid 不会自动继承父容器的轨道、区域名或对齐规则——每一层都必须手动启用网格上下文，且作用域完全独立。
display: grid 必须显式设置在每一层容器上
很多人以为子 div 在父 display: grid 容器里就“天然支持 Grid 布局”，其实不会。子容器默认仍是普通块元素，grid-column、grid-area 等声明全无效。
- 只有给子容器加
display: grid或display: inline-grid，它才成为真正的嵌套网格 - 常见错误：父容器设了
display: grid，子容器是<span></span>或<a></a>这类默认inline元素，此时即使加display: grid也会被忽略——需先加display: block或直接用display: grid（后者隐含块级） - Flex 容器里的子项设
display: grid没问题；Grid 容器里的子项设display: grid也没冲突，但必须写出来
grid-template-areas 不跨层级生效
grid-template-areas 只在声明它的那个容器内解析，不能“穿透”到孙子级，也不能复用父级定义的区域名。
- 父容器写了
grid-template-areas: "header header" "main sidebar"，孙子元素写grid-area: header是无效的——除非它直接是父容器的子元素 - 子容器想用命名区域，必须自己写
display: grid+grid-template-areas，名字可以和父级重复（比如都叫sidebar），但彼此无关 - 避免把
grid-template-areas写在太顶层（如body），否则深层嵌套时维护成本陡增，改一处要查三层
fr 单位依赖父容器有明确尺寸
1fr 不是“填满父容器”，而是“分配父容器当前可用空间”。如果父容器高度是 auto，1fr 就没基准可算，常表现为内容撑开、高度塌缩。
立即学习“前端免费学习笔记（深入）”；
- 子 Grid 容器若用了
grid-template-rows: 60px 1fr，必须确保它自身有明确高度（如height: 100%），且其父容器有固定高（px、vh）或已通过其他方式约束高度 -
height: 100%能生效的前提是：父容器高度不是auto，且祖先链中至少有一层有明确高度（不能全是百分比无源头） - 慎用
minmax(0, 1fr)在嵌套中——尤其当子容器有overflow: hidden时，可能直接让1fr行高度归零
subgrid 只对直接子元素生效，且要求严苛
subgrid 不是“继承开关”，而是一组硬性条件组合：父容器显式定义轨道 + 子元素是直接子项 + 子元素设 display: grid + 显式声明 grid-template-columns: subgrid 或 grid-template-rows: subgrid。
- 父容器用
repeat(auto-fit, ...)或grid-auto-columns定义列？subgrid失效——它只认grid-template-columns: 1fr 2fr 1fr这类明确轨道 - 中间插了个
divwrapper 或用了display: contents？子元素不再是直接子项，subgrid彻底不触发 - 不能混写：
grid-template-columns: subgrid 100px整条规则会被浏览器丢弃；要么全subgrid，要么全自定义 - Chrome 117+、Edge 117+、Safari 16.4+ 支持，Firefox 仍需手动开启实验标志；旧版 Safari 遇到
subgrid会静默失效，布局看似正常实则错位
真正容易被忽略的是：嵌套 Grid 的“独立性”不是 bug，而是设计使然。你得习惯每层都手动初始化网格上下文，而不是指望 CSS 自动穿透。一旦漏掉某一层的 display: grid 或 height: 100%，问题就藏在 DOM 层级深处，DevTools 很难一眼定位。
