必须给子容器显式加 display: grid，否则 grid-column 等定位属性不生效；父容器 grid-template-areas 仅对直系子元素有效；subgrid 需同时满足父显式定义轨道、子为直接子项、子声明 display: grid 和 grid-template-rows: subgrid 三条件。
必须给子容器显式加 display: grid，否则它只是普通块级元素，不会解析任何 grid 定位属性。
为什么 grid-column 在子元素上不生效？
常见现象是子元素堆在左上角、文字重叠、或完全无视 grid-column: 2 指令。根本原因是：Grid 上下文不继承 —— 父容器设了 grid-template-columns，它的子元素若没声明 display: grid，就仍是普通流内元素，grid-column 对它无效。
检查方法：打开开发者工具，看该子元素的 computed display 是不是 grid；如果是 block，那所有 grid 定位都白写了。
- ✅ 正确写法：
.submenu { display: grid; grid-column: 2; } - ❌ 错误写法：
.submenu { grid-column: 2; }（缺display: grid） - 父容器的
grid-template-areas只对直系子元素有效，孙子层写grid-area: header完全不响应
subgrid 要生效，三个条件一个都不能少
subgrid 不是语法糖，浏览器会静默忽略不满足条件的声明。最常被忽略的是“父容器必须显式定义轨道”——用 grid-auto-columns 或 repeat(auto-fit, ...) 都不行。
立即学习“前端免费学习笔记（深入）”；
- 父容器需有
display: grid且显式声明grid-template-rows或grid-template-columns（比如repeat(3, 1fr)或带命名线的写法） - 子元素必须是父容器的**直接子项**（DOM 中不能隔一层 wrapper；
display: contents也会破坏父子关系） - 子元素自身要写
display: grid+grid-template-rows: subgrid（或列）+ 显式grid-row范围（如grid-row: 1 / -1）
验证是否生效：开发者工具中看 computed grid-template-rows 是否显示为 subgrid；若显示为 none，说明整条规则已被丢弃。
嵌套后尺寸失控？别指望父容器自动传高宽
父容器用 1fr 分配空间，子容器若没设高度，它的 grid-auto-rows 默认由内容撑开，而不是继承父的轨道高度。结果就是子网格“塌”成一行，或者内部项目挤在一起。
- 子容器若需等高（比如多列卡片底部对齐），应在自身设
grid-auto-rows: 1fr，而非依赖父级align-items: stretch - 慎用
minmax(0, 1fr)嵌套中——尤其配合overflow: hidden时，容易导致子容器高度塌缩 - 父容器用
fr，子容器建议用px、rem或明确的1fr（避免循环依赖）
真正麻烦的不是怎么写，而是哪一层漏了 display: grid，或者哪一层偷偷引入了 gap 或空元素，把轨道链打断了。调试时先关掉所有样式，逐层打开 display: grid 和轨道定义，比瞎猜快得多。
