grid-template-areas必须配合display: grid生效，且仅作用于直接父容器；区域名须与grid-area值完全一致，空位用.占位，响应式需整行重写字符串。
直接用 grid-template-areas 做响应式三栏，核心就两条：桌面端写一行字符串定义三列顺序，移动端换一行字符串改成单列堆叠；中间内容优先渲染必须靠 HTML 里 main 写在最前，而不是靠 CSS 调序。
为什么 grid-template-areas 必须配合 display: grid 才生效
写了 grid-template-areas: "header main sidebar" 却没效果？八成是父容器漏了 display: grid。这个属性只在显式声明为网格容器时才解析字符串——子元素自己加 display: grid 没用，<header></header> 这类语义标签默认也不是网格容器。
-
grid-template-areas是容器级声明，必须作用于直接父容器（比如.layout或body） - 区域名大小写、空格、连字符必须和子元素的
grid-area值完全一致，"main"和"Main"不匹配 - 字符串中每个单词代表一个命名区域，空单元格必须用
.占位，不能留空格或写null - 用
console.log(getComputedStyle(el).gridTemplateAreas)可验证是否被正确解析
桌面三栏怎么写才不踩坑：固定宽 + 中间自适应的最小可行结构
别一上来就套 1fr 1fr 1fr——那不是三栏布局，是等宽分尸。真正可用的写法得让左右栏有底线保护，中间能呼吸：
.container {
display: grid;
grid-template-areas: "left main right";
grid-template-columns: 200px 1fr 250px;
}
aside.left { grid-area: left; }
main { grid-area: main; }
aside.right { grid-area: right; }
- 两侧用像素值（如
200px）比百分比更可控，避免小屏下侧栏被压缩到看不见 - 中间用
1fr而非auto，确保它吃掉所有剩余空间，不会被内容撑开后挤垮布局 - 如果左/右栏内容不可控（比如用户输入长标题），必须加
overflow: hidden或text-overflow: ellipsis，否则会撑爆列宽 -
grid-template-areas字符串里不能有多余空格或换行符，"left main right"合法，"left main right"（双空格）可能在某些浏览器里截断
移动端堆叠布局：媒体查询里重写整行 grid-template-areas，不是局部覆盖
grid-template-areas 不支持“只改某一行”，所以响应式切换不是叠加规则，而是整套替换：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.container {
grid-template-areas: "header"
"main"
"footer";
}
aside.left,
aside.right {
display: none;
}
}
- 每行字符串必须用引号包裹，且每行单词数要和
grid-template-columns列数对齐；如果删了侧栏，就别再留left或right区域名，否则对应元素会掉进隐式网格、位置失控 - 想保留左栏但移到顶部？把
grid-template-areas改成"left" "header" "main" "footer"，再配order: -1或直接靠区域名调度 - Safari 10.1+ 才稳定支持多行字符串，IE11 完全不支持，需降级方案（如 Flex fallback）
- 别在同一个媒体查询里混用
grid-column和grid-template-areas，容易冲突，优先用后者统一管理
中间内容优先渲染的关键：HTML 顺序不能动，grid-area 映射来补位
无障碍和 SEO 要求 main 在 DOM 中排第一，但视觉上又要居中——这时候千万别用 order 去调序，它会破坏 grid-area 的映射逻辑。正确做法是：
- HTML 里保持
<main></main>第一个出现，<aside class="left"></aside>和<aside class="right"></aside>紧跟其后（语义顺序） - CSS 里用
grid-area: main把它塞进中间列，用grid-area: left和grid-area: right分别归位到两边 - 如果 HTML 里把
aside写在main前面，视觉上它就会真·挡在前面，grid-template-areas不会帮你“自动绕过” - 区域名一旦漏写（比如忘了给
aside.right设grid-area），它就会掉进隐式网格，可能出现在 footer 下面或右侧空白处，极难排查
最易忽略的一点：所有区域名必须在 grid-template-areas 字符串里出现，哪怕某区域暂时不用，也要用 . 占位，否则整个映射关系就断了。
