grid-template-areas：把布局画成字符画
与其在每个项上数线号，不如先给单元起名字。grid-template-areas 用一组字符串（每串一行、每个名字一格）把网格画成字符矩阵，项再用 grid-area: main 落到同名区。布局结构因此在 CSS
里一眼可读，改版式只是重排字符串。本页可直接编辑模板矩阵实时重排，并演示两条硬规则：同名格必须连成矩形、. 表示留空单元。
命名区会隐式生成命名线。 名为 main 的区会自动得到 main-start / main-end 四条命名线，于是其他项也能用 grid-column: main-start / main-end 去对齐它。区域名本质上是命名线的语法糖。
1 · 编辑模板，实时重排版式
下方每一行是一串区域名（空格分隔），行数 = 网格行数、每行的格数 = 列数。改动即时生效；若某个名字的格子不连成矩形，整条 grid-template-areas 会被引擎判为非法而整体失效（读数会提示）。
2 · 规则与要点
| 规则 | 说明 |
|---|---|
| 每行格数相等 | 所有字符串的「token 数」必须一致，否则声明非法。 |
| 同名须成矩形 | hd nav / nav hd 这种 nav 不连续 → 非法，整体失效。 |
. = 空单元 |
一个或多个 . 表示该格不属于任何命名区（留空）。 |
| 列宽 / 行高另设 | areas 只定结构，具体尺寸仍由 grid-template-columns / -rows 给。 |
| 隐式命名线 | 区 x ⇒ 线 x-start / x-end，可被其他项引用。 |
响应式只需重画字符串。 桌面用 "nav main side" 的三列，窄屏在媒体查询里换成 "hd" "nav" "main" "side" "ft" 的单列堆叠——同一批
grid-area 项无需改动，布局却完全重排。点上方「窄屏堆叠」预设即是此意。