直接用 grid-template-areas 配合 grid-area 可将布局转化为可读的“ascii 草图”：父容器设 display: grid 和 grid-template-areas 定义区域分布，子元素用 grid-area 匹配名称定位，再通过 grid-template-columns/rows 设置行列尺寸，响应式只需替换 grid-template-areas 字符串。
直接用 grid-template-areas 配合 grid-area，就能把布局变成一张可读的“ASCII 草图”——画几行字符串，填几个名字，结构就定下来了。
一、父容器上写“视觉草图”
在网格容器（比如 .layout）上设置 display: grid，再用 grid-template-areas 描述每行的区域分布。每行用双引号包裹，单词之间**只用一个空格**分隔，相同单词自动连成一块区域：
-
grid-template-areas: "header header header" "nav main aside" "footer footer footer";→ 表示三行：第一行全为 header，第二行从左到右是 nav / main / aside，第三行全为 footer - 空白单元格必须用英文句点
.占位，例如"header . sidebar"表示中间列留空 - 所有行的单词数必须一致，否则整条规则失效（浏览器静默忽略）
二、子元素用 grid-area “认领”位置
每个需要定位的子元素，显式声明 grid-area，值必须与草图中的名称**完全一致**（大小写、短横线、无引号、无空格）：
- ✅ 正确：
.header { grid-area: header; } - ❌ 错误：
grid-area: "header";（加了引号）、grid-area: Header;（大小写错）、grid-area: top-header;（草图里没定义这个名） - 未匹配的元素会退回文档流，默认从左到右、从上到下排列
三、配合行列尺寸让区域落地
grid-template-areas 只定义“名字怎么排”，不决定“多宽多高”。必须搭配 grid-template-columns 和 grid-template-rows 才能真正渲染出来：
- 例如：
grid-template-columns: 200px 1fr 300px;对应三列；grid-template-rows: 80px auto 60px;对应三行 - 如果只写
grid-template-areas而不设行列尺寸，浏览器会按内容自动撑开，可能不符合预期 - 推荐用
fr、minmax()或auto等灵活单位，适配不同内容
四、响应式切换只需改一行字符串
不同屏幕尺寸下调整结构，不用重写整个网格规则，只要替换 grid-template-areas 的值即可：
- 桌面端侧边栏在左：
"header header" "nav main" "footer footer" - 移动端侧边栏移到底部：
"header header" "main main" "nav nav" "footer footer" - 区域名不变，语义和逻辑保持一致，维护成本低
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
