嵌套 Grid 的 display: grid 生效，但父网格项必须是块级元素；grid-template-areas 不能跨层继承；fr 单位基于直接父容器可用空间；justify-items/align-items 仅作用于直系子项。
嵌套 Grid 的 display:grid 是否生效
生效，但必须确保父网格项（即子容器）本身是块级元素且未被其他样式压制。常见错误是父项被设为 display: inline 或 display: inline-block，此时 display: grid 会被忽略——CSS 规范明确要求 display: grid 只对块级上下文起作用。
- 检查父项是否设置了
display: inline、display: inline-flex等非块级显示类型 - 若父项是
<span></span>或<a></a>这类默认 inline 的标签，需显式加display: block或display: grid（后者已隐含块级行为） - Flex 容器里的子项即使设了
display: grid，也能正常工作；Grid 容器里的子项同样支持再设display: grid，无冲突
grid-template-areas 在嵌套 Grid 中的写法限制
grid-template-areas 必须在直接定义网格的容器上声明，不能“继承”或“穿透”到嵌套层。也就是说，外层用 grid-template-areas 划分区域，内层要另起一套命名，彼此完全独立。
- 外层的
"header header" "main sidebar"和内层的"title actions" "content content"毫无关系 - 嵌套时别试图复用同一组 area 名称，否则会报错或静默失效（浏览器不校验跨层级 name 冲突，但布局不会如预期）
- 如果依赖语义化命名，建议加前缀，比如外层用
outer-header，内层用inner-title
fr 单位在嵌套 Grid 中的计算逻辑
fr 是相对于其**直接父容器的可用空间**计算的，不是最外层视口或根网格。这意味着嵌套越深，fr 的基准越小，容易误判尺寸比例。
- 外层设
grid-template-columns: 1fr 2fr，总宽 600px → 第一列 200px，第二列 400px - 若第二列里又建 Grid，设
grid-template-columns: 1fr 1fr，它的可用宽是 400px（不含 padding/margin），两列各 ~200px - 注意：
fr不考虑子项自身的min-width或内容撑开行为，一旦内容超限，fr 会退化为按内容宽度分配
justify-items / align-items 对嵌套 Grid 子项的控制范围
这两个属性只影响**当前容器直系子项**的对齐，对嵌套 Grid 内部的子项完全无效。想控制深层元素，必须在对应层级的容器上设置。
立即学习“前端免费学习笔记（深入）”；
- 外层设
justify-items: center→ 只居中外层的 4 个直接子div，不影响它们内部的嵌套 Grid 布局 - 嵌套 Grid 的子项要居中，得在其父容器（即那个嵌套 Grid 容器）上设
justify-items: center - 不要指望用
align-self跨两级生效；它只对父容器的直接子项有效，哪怕那个子项自己也是 Grid 容器
