能嵌套grid，但每层容器必须显式声明display: grid；子网格不继承父网格的隐式轨道或区域名；subgrid需同时满足父容器显式定义轨道、子元素为直接子项且自身设grid-template-rows: subgrid和grid-row范围。
能，但必须让每一层的容器都显式声明 display: grid，且子网格不能依赖父网格的隐式轨道或区域名。
子元素设 display: grid 才算真正嵌套
嵌套不是自动发生的。父容器设了 grid-template-columns，它的某个子元素（比如 .main）只是普通块级元素——它不会“继承”网格能力。只有你手动给这个子元素加 display: grid，它才成为新一层网格容器。
- ✅ 正确：
.main { display: grid; grid-template-rows: 60px 1fr; } - ❌ 错误：只写
.main { grid-row: 2 / 3; }，没设display: grid，它仍是普通流内元素 - 常见现象：子元素内容堆在一起、
grid-column不生效、开发者工具里 computed 样式中display显示为block
grid-template-areas 不穿透层级
父容器定义的 grid-template-areas 只对它的直系子元素有效。孙子元素哪怕写了 grid-area: header，只要它不在父容器的子元素列表里，就完全不参与该区域映射。
- 父容器写了
grid-template-areas: "header header" "nav main"，那只有它的直接子元素能用grid-area: header - 如果
.main是子元素，它内部再设一个.card，想让.card__title对齐到顶层的第 1 行？不行——.card__title是孙子，不认父容器的grid-template-areas - 解决办法：要么在
.main内部重新定义自己的grid-template-areas，要么改用grid-row/grid-column数值定位（配合subgrid更省事）
用 subgrid 实现轨道继承时的硬门槛
subgrid 不是语法糖，它要运行必须同时满足三个条件，缺一即静默失效：
- 父容器必须有
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），否则只占默认单行
检查是否生效最简单的方法：打开开发者工具，看子元素的 computed grid-template-rows 是否显示为 subgrid —— 如果显示为 none，说明整条声明已被浏览器忽略。
嵌套过深时的尺寸控制陷阱
嵌套 Grid 容器之间不自动传递尺寸约束。父容器用 1fr 分配空间，子容器若没设高度，它的 grid-auto-rows 默认由内容撑开，而不是继承父的轨道高度。
- 想让多张卡片等高？别指望父容器的
align-items: stretch透传到底层，应在每张卡片（子网格）上设grid-auto-rows: 1fr - 慎用
minmax(0, 1fr)在深层嵌套中——某些浏览器下会导致子容器高度塌缩，尤其当内部有overflow: hidden时 - 响应式断点里修改父容器的
grid-template-columns，不会自动更新子网格的列数；子网格需单独写媒体查询或用subgrid同步
真正麻烦的不是写法，而是哪一层该管尺寸、哪一层该管内容分布——多数布局问题，根源在于某一层忘了设明确的 display: grid，或者误以为 grid-area 能跨两层生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
