必须先写 display: grid，否则 grid-template-areas 完全不生效；父容器需设 display: grid（或 inline-grid），子元素须显式声明与模板字符串完全一致的 grid-area，每行单词数相等，空位用 . 占位，区域名仅含 ascii 字母数字连字符且大小写敏感。
必须先写 display: grid，否则 grid-template-areas 完全不生效
这是最常卡住人的第一步。很多人只写了 grid-template-areas: "header" "main"，但父容器没设 display: grid，结果所有子元素照常流式排列，区域名像注释一样被浏览器忽略。它不是可选开关，是硬性前提。
顺带注意：display: inline-grid 也合法，但移动端整页布局一律用 display: grid 更稳妥，避免行内上下文干扰。
- 子元素必须显式声明
grid-area，且值要和模板中字符串里的名称**完全一致**（大小写、连字符、空格都算错） - 没声明
grid-area的元素不会被区域捕获，会掉进隐式网格，位置不可控 - 模板每行引号内单词数必须相等，比如
"header header"和"nav main"都是两个词；若需留空，用点号.占位，如"header ."
移动端单列堆叠必须显式写 grid-template-areas，不能只靠 grid-template-columns: 1fr
只设 grid-template-columns: 1fr 不等于单列堆叠——Grid 默认 grid-auto-flow: row，所有子项仍会从左到右填满第一行，除非你手动给每个项加 grid-column: 1 或用 grid-row 推下去。真正让 DOM 顺序变成视觉顺序的，是区域模板本身。
正确写法是：在移动端断点里，把容器设为：
grid-template-areas: "header" "nav" "main" "sidebar" "footer";
再配合每个区块的 grid-area: header、grid-area: nav 等声明，它们就自然按字符串顺序从上到下堆叠了。
- 漏掉这一步，哪怕其他样式全对，视觉上也会“挤成一行”或“错位跳行”
-
grid-template-areas的字符串顺序 = 渲染顺序 = 语义顺序，这对屏幕阅读器和 SEO 是透明友好的 - 别用
order或grid-column手动挪位置——维护成本高，且容易和媒体查询冲突
桌面端重排只改 grid-template-areas 值，不动 HTML 和子项样式
桌面断点里，直接把上面那段改成二维结构就行，例如：
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer";
只要子元素的 grid-area 还是 header、nav 等，它们就会自动归位。DOM 顺序、语义、Tab 键焦点流全部不变，只变视觉布局。
- 侧边栏右置？改写成
"header header header""nav main sidebar"—— 只要存在grid-area: sidebar的元素，它就去最后一列 - 广告横跨全宽？模板里写
"advert advert advert"，对应元素设grid-area: advert - 避免在列表项内部用
grid-template-areas：iOS Safari 解析开销大，列表页性能敏感，改用grid-column/grid-row显式定位更稳
grid-auto-flow: dense 在区域布局里基本没用，还容易埋坑
grid-template-areas 已经锁死了每个区域的位置和尺寸，grid-auto-flow: dense 对它不起作用。它只影响那些没指定 grid-area、靠自动流填入隐式网格的元素——而这类元素本就不该出现在命名区域布局中。
真要用 dense，只适合卡片网格（如商品列表）中部分项 display: none 后的回填场景。但在区域驱动的页面骨架里启用它，反而可能导致未声明 grid-area 的调试元素“钻空子”覆盖关键区块。
- 区域布局的本质是“所见即所得”，
dense破坏这种确定性 - 如果发现某区块没出现，优先检查：是否漏写
grid-area、模板拼写是否一致、父容器是否真有display: grid - 需要“跳过空白区域”？用点号
.显式占位，比依赖dense更可控
grid-area 对不上，整个结构就失去可预测性——这时候查控制台报错没用，得回到那几行字符串里逐字核对。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
