grid-template-areas 是定义网格区域布局的核心，通过字符串声明命名区域，空白分隔列、换行分隔行；区域名须为合法标识符（如 header、main），不可含中划线，行列数须一致，缺位用 . 占位。
grid-template-areas 是定义复杂区域布局的核心
真正实现“按区域命名+自动填充内容”的关键不是 grid-template-columns 或 grid-template-rows，而是 grid-template-areas。它用字符串拼出视觉网格结构，每个单词代表一个命名区域，空白字符分隔列，换行分隔行。
常见错误是把区域名写成变量或带中划线（如 main-content），但 css 中区域名不支持中划线，必须是合法标识符（字母、数字、下划线，不能以数字开头）。
-
header、sidebar、main、footer是安全的命名 - 所有字符串行必须列数一致，缺位用
.占位（否则声明无效） - 区域名在
grid-area中复用，大小写敏感，拼错就找不到区域
display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer";grid-area 必须与 template-areas 中的名称严格匹配
给子元素指定归属区域时，grid-area 的值不是类名，也不是选择器，就是字符串字面量——必须和 grid-template-areas 里写的那个词一模一样。
典型翻车场景：HTML 中写了 <header class="site-header"></header>，然后在 CSS 里写 .site-header { grid-area: site-header; } —— 这会失败，因为 site-header 不在 grid-template-areas 定义中，且含中划线非法。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：统一用
header，grid-area: header; - 如果需要多个同类型区域（比如左右两个 sidebar），可命名为
sidebar-left和sidebar-right，只要grid-template-areas字符串里也用同样名字 -
grid-area还能接受四值语法（row-start / col-start / row-end / col-end），但区域命名方式更直观、更易维护
自动填充内容？其实是靠 HTML 元素顺序 + grid-auto-flow
Grid 不会“扫描内容自动塞进对应区域”，所谓“自动填充”其实是靠显式分配：grid-area 把每个元素钉死到某个命名区域。但如果你希望某些内容按 dom 顺序依次填入空闲区域，就得配合 grid-auto-flow 和隐式命名。
例如：只定义了 "header main footer"，但 HTML 里有 5 个 <section></section>，前三个设了 grid-area，后两个没设——它们不会自动进 main，而是被挤到隐式行里，可能溢出或重叠。
- 想让未指定
grid-area的元素按顺序填空，需设置grid-auto-flow: row dense; -
dense启用回填（把小元素塞进前面留下的空洞），但可能打乱视觉顺序，慎用 - 更可靠的做法：显式写满所有区域名，或用
grid-column: span 2等控制跨格，避免依赖自动流
响应式切换区域布局要重写整个 grid-template-areas
媒体查询中不能只改某一行区域定义，grid-template-areas 是原子性声明，必须整条重写。这意味着移动端堆叠布局和桌面三栏布局，得分别写出两套字符串。
容易忽略的是：不同断点下，区域名最好保持一致（比如始终叫 main），否则维护成本飙升；同时要注意每行列数必须一致，否则 Grid 引擎会静默失效（浏览器不报错，但布局退化为普通块流）。
- 桌面端：
"header header header" "sidebar main aside" "footer footer footer" - 移动端：
"header" "main" "sidebar" "aside" "footer" - 区域名重复没关系（如多行都写
main），Grid 会把所有grid-area: main的元素合并到同一逻辑区域
实际项目中最容易卡住的，是区域名拼写不一致、字符串行列数对不齐、以及误以为未设 grid-area 的元素会被智能归位——它只会老实待在原始文档流位置，除非你明确告诉它去哪。