先记住这个答案
grid-template-areas 给一块矩形网格区域命名，适合声明页面上的头部、侧栏和正文。命名网格线则是给一条行线或列线取别名，通常写在 grid-template-columns 或 grid-template-rows 的方括号中。两者相连：定义了 main 区域，也会自动得到 main-start 和 main-end 这些边界线名，可用于按线定位。
- 区域指一块矩形，线指一条边界
- 区域会生成对应的起止线名
- 线名写在轨道模板的方括号里
- 显式同名线会影响定位解析
区域用于描述版式
例如区域图第一行全是 header，第二行左边是 nav、右边是 main。这比逐个记列线号码更接近页面结构。响应式断点重新定义区域图后，项目仍可写 grid-area: main，无需改自身的定位规则。
.page {
display: grid;
grid-template-columns: [left] 12rem [content-start] 1fr [right];
grid-template-areas: "header header" "nav main";
}
.page main { grid-area: main; }
.page .badge { grid-column: content-start / right; }这里 main 是第二行右侧的矩形；content-start 与 right 是手写的列线别名。区域 main 还会让对应的边界线可通过名称引用。项目可以按完整区域放置，也可以只指定列边界，再让行位置自动安排。
线名适合精确控制边界
区域必须是矩形并占用一组格子。命名线没有这个要求；一条线可以同时有多个名称，如侧栏结束线也可以叫正文起点线。跨栏广告只需知道从 left 到 right，用线名会比增加专门的命名区域更直接。
需要警惕名称碰撞。区域自动产生的线名与显式写出的同名线会进入同一套定位解析；CSS 对显式线名有优先规则。若项目放错列，先检查轨道模板中是否已经写了相同的 main-start 或 main-end。
命名区域像给一块矩形取名，命名线则像给边界取名。页面骨架适合写 grid-template-areas，因为 header、nav、main 直接展示谁占哪块；一条横跨主栏与侧栏的装饰线更适合按起止线定位。区域 main 会产生 main-start、main-end 这类隐式线名，但只在对应轴的边界上有效。调试时先确认名字是区域名还是线名，再看项目是否同时指定了行、列。
容易答错的地方
- 认为区域只是给项目加类名
- 区域是容器定义的坐标，与 HTML 类名无关。项目要通过
grid-area才会引用它。 - 认为命名线必须成对出现
- 可以只命名一条边界线。另一边仍可用数字、
span或自动放置来确定。
面试官还会怎么问？
定义 main 区域后能写 grid-column: main-start / main-end 吗？
可以。命名区域会隐式产生对应的起止边界线，列轴也能引用这些名称。
同一条线能有两个名字吗？
能。在方括号里用空格列出两个名称，两个名称都指向同一条线。
区域图能写成 L 形吗？
不能。同名格子要组成单一矩形；L 形或分离的区域图无效。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。