grid-template-areas 必须与 grid-area、grid-template-columns 配合使用才能生效；缺一则退化为单列流，因规范静默降级，区域名大小写敏感且需严格匹配字符串格式。
直接用 grid-template-areas + grid-area + grid-template-columns 三者配齐，就能稳稳实现——缺一个，布局就静默退化成单列流，不是“不生效”，是根本没进入网格上下文。
为什么写了 grid-template-areas 却还是单列塌陷
这不是浏览器 bug，是 CSS Grid 规范的静默降级行为：只要字符串格式或配套声明出错，整条规则被丢弃，容器回落为普通块级流。
-
grid-template-areas每行引号内单词数必须严格一致（三栏就每行三个词），例如"header header header"→"left main right"→"footer footer footer"；少一个、多一个、换行错位，全失效 - 区域名只允许 ASCII 字母、数字、连字符，
main和Main是两个不同区域，大小写敏感 - 写了
.aside { grid-area: aside; }，但grid-template-areas字符串里没出现aside—— 元素直接“消失”，不是错位，是未被识别为网格项 - DevTools 里检查 computed 样式，若
grid-area显示为auto，说明该元素压根没进网格
必须显式声明 grid-template-columns，否则没列
grid-template-areas 只定义语义位置，不定义尺寸。不写 grid-template-columns，所有子元素默认挤在第一列，视觉上就是一列流。
- 三栏圣杯典型写法：
grid-template-columns: 200px 1fr 200px（左固定、中弹性、右固定） - 避免混用单位：
20% 1fr 20%中的 % 相对容器宽，fr 分的是剩余空间，结果不可控 - 侧栏内容可能超长（比如未截断的 URL），用
minmax(0, 1fr)替代纯1fr更安全，防挤压 - 主内容不用
auto：它不会撑高容器，footer容易上浮；1fr才能占满剩余高度空间
响应式切换时，grid-template-areas 和 grid-template-columns 必须同步改
只调列宽、不重排区域字符串，是移动端最常踩的坑——浏览器仍按原三栏结构尝试渲染，结果留白、错行或元素堆叠。
立即学习“前端免费学习笔记（深入）”；
- 桌面端：
grid-template-areas: "header header header" "left main right" "footer footer footer" - 移动端（768px 下）必须同步改成：
grid-template-areas: "header" "left" "main" "right" "footer"+grid-template-columns: 1fr - 即使某栏要隐藏（如右栏），也得保留在字符串里；删了它，对应
grid-area: right就断链失效 - 别用
display: contents包一层再套 Grid——父容器“消失”，子元素直接受上级网格约束，grid-area在它身上完全无效
真正容易被忽略的点是：区域名匹配是纯字符串比对，不解析 HTML 标签名、不读取 class 名、不推导语义。写 <main></main> 不等于 grid-area: main，必须手动指派；漏掉引号、多一个空格、大小写错一位，整个布局就无声无息地回到原始文档流——调试时得盯着 DevTools 的 computed 样式看 grid-area 值，而不是猜“Grid 为啥不工作”。
