grid-area 对空单元格无效，因其仅分配区域而不创建网格项；html 中必须存在对应元素（如空 div）才能绑定，否则该区域被跳过或塌陷。
Grid-area 为什么对空单元格无效
直接说结论：grid-area 本身不创建网格项，它只是给**已存在的元素**分配区域；如果 HTML 里根本没写那个格子的元素，grid-area 就没东西可绑，空白区域自然不会“占位”。
常见错误现象是：写了 grid-template-areas，比如 "header header header" "nav main aside" "footer footer footer"，但 HTML 只放了 <header></header> 和 <main></main>，结果 nav、aside 对应的位置塌陷，整行高度被压缩——不是 grid-area 失效，而是它根本没生效对象。
- 必须在 HTML 中存在对应元素（哪怕只是空
<div></div>），才能用grid-area: nav绑定 - 如果真不想写语义标签，可用带
class的空<div class="nav"></div>，再用 CSS 选中设置grid-area: nav -
grid-area的值（如nav）必须和grid-template-areas里写的字符串完全一致，包括大小写和空格
用伪元素或空 div 填充 grid-area 空白区域
想让某个格子“视觉上存在”，最稳妥的方式是让它有 DOM 节点。伪元素（::before/::after）不能脱离宿主元素存在，所以不能独立占一个 grid-area；真正能用的，是显式插入空元素。
使用场景：响应式布局中某些区域只在大屏显示，小屏隐藏但需保留位置（避免内容跳动），或设计稿要求固定网格结构，即使某块暂时无内容。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<div class="grid-placeholder" aria-hidden="true"></div>，再配 CSS：.grid-placeholder { grid-area: aside; } - 不要用
visibility: hidden或opacity: 0代替 display:none —— 它们仍占文档流，但若父容器是display: grid，它们依然会参与网格定位 - 如果该区域永远为空，建议加
aria-hidden="true"和tabindex="-1"，避免屏幕阅读器误读
grid-template-areas 中的 "." 字符不是占位符，而是“跳过”
grid-template-areas 里的 . 表示“此处不放置任何网格项”，不是留白占位，而是彻底跳过——它不影响轨道尺寸计算，也不会阻止相邻区域合并或挤压。
例如："header header ." "nav main ."，第三列不会因此产生宽度，header 和 nav 实际只跨两列，右侧直接到容器边缘。
- 想让某列保持宽度，必须靠
grid-template-columns显式定义，比如1fr 2fr 100px -
.和空字符串效果一样，但.更易读；多个连续.（如".."）等价于一个. - 如果误把
.当成占位符，却没设列宽，就容易出现“明明写了三列，实际只显示两列”的困惑
空单元格撑开高度的常见陷阱
空 <div> 默认不撑开高度，尤其当它没内容、没边框、没内边距、没最小尺寸时，所在网格轨道可能坍缩为 0 —— 这和 <code>grid-area 无关，是 CSS 盒模型本身的规则。
性能影响不大，但视觉错乱很直接：比如页脚突然贴到内容底部，或侧边栏消失。
- 最简解法：
min-height: 1px或height: 0+min-height: min-content - 更可控的做法：给占位元素设
font-size: 0+line-height: 0，再加min-height: 1em（按需调整） - 注意
align-items: start（默认值）下，空元素高度由其min-block-size决定，不是由父容器拉伸而来
复杂点在于：网格轨道尺寸最终由所有网格项共同决定，单个空单元格是否撑高，取决于它所在的行/列里有没有其他内容、是否有 minmax()、是否设置了 grid-auto-rows。别只盯着 grid-area 看。
