grid-template-areas 实现网格布局的核心是“先画区域，再放内容”，通过语义化命名区域（如header、hero）、用字符串定义视觉结构、子元素以grid-area匹配区域名自动定位，支持响应式切换且易维护。
用 grid-template-areas 实现复杂网格，核心是“先画区域，再放内容”，比纯数字行列定位更直观、易维护。
用命名区域搭出视觉草图
在 grid-template-areas 中，每行代表网格的一行，每个单词代表一个命名区域，相同单词自动合并成一块连续区域。空字符串 "." 表示空白单元格。
例如：
grid-template-areas: "header header header" "nav main aside" "footer footer footer";
这直接对应三行布局：顶部通栏、中间三栏（导航+主区+侧边）、底部通栏。人眼一眼看懂结构，改起来也快。
立即学习“前端免费学习笔记（深入）”；
区域名要语义化，别用 a1、b2 这类代号
命名区域不是为了凑语法，而是为了表达意图。比如用 hero 而不是 area1，用 cta-section 而不是 block4。这样后期交接或重构时，别人看 CSS 就能猜出 HTML 里该放什么。
-
推荐：
header、sidebar、featured-card、contact-form -
避免：
col1-row2、box-a、section-x
让元素“认领”对应区域
给子元素设置 grid-area: xxx，它就会自动填入同名区域。不需要算行号列号，也不用写 grid-row / grid-column。
比如：
.main-content { grid-area: main; }
.site-header { grid-area: header; }
.cta-banner { grid-area: hero; }
只要名字对得上，Grid 引擎自动完成定位。即使后续调整了 grid-template-areas 的排布，只要区域名不变，元素依然各就各位。
响应式切换布局只需换一套区域定义
配合媒体查询，可以为不同屏幕尺寸定义完全不同的区域排列，代码清晰不嵌套。
.layout {
display: grid;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
"header header"
"nav main"
"aside main"
"footer footer";
}
}
小屏竖排、大屏左右分栏，逻辑一目了然，没有计算偏移或隐藏显示的干扰。
不复杂但容易忽略：区域名必须严格一致（大小写、连字符、引号都算），且所有行的列数要对齐，否则整条 grid-template-areas 声明会失效，退回到默认流式布局。
