grid-template-areas 是最稳的响应式顺序控制手段，通过声明区域位置实现布局切换，不依赖DOM顺序、不影响可访问性，配合媒体查询重定义模板即可高效维护多端布局。
用 grid-template-areas 定义移动端专属布局流
直接改 HTML 结构成本高，纯靠 order 又不可靠——这时候 grid-template-areas 是最稳的响应式顺序控制手段。它不依赖元素原始顺序，也不影响 DOM 或可访问性，只声明“每个区域该出现在哪”，浏览器就照着填。
关键前提是：容器必须是 display: grid，且所有子元素都得有对应的 grid-area 值（哪怕只是占位）。
- 桌面端常见写法：
grid-template-areas: "header header" "nav main" "footer footer" - 移动端想让
nav下沉？改成：grid-template-areas: "header header" "main main" "nav nav" "footer footer" - 注意引号内每行代表一行网格轨道，空格分隔列；区域名必须和子元素的
grid-area完全一致（大小写、连字符都不能错）
@media 里重写 grid-template-areas 就够了
不需要给每个元素单独加 order 或改 grid-row，一套模板覆盖全部断点更清晰、更易维护。
示例（移动端
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.layout {
grid-template-areas:
"header"
"main"
"nav"
"footer";
}
}
- 每行只写一个区域名，表示单列纵向排列
- 没出现的区域（比如广告位
aside）会自动被隐藏（如果没设grid-area或未在模板中声明） - 如果某区域需跨多行（如
header占两行），写成"header header"即可，但要确保对应元素的grid-area: header已设置
为什么不用 order 配合 Grid？
order 在显式定义了 grid-template-areas 的容器里完全无效——区域模板优先级高于 order。强行混用只会让你调试时怀疑人生。
- Grid 中
order只在“自动填充”场景下起作用（即没设grid-area、grid-row等定位属性时） - 一旦用了
grid-template-areas，浏览器就按区域映射填内容，order被忽略 - 想微调同一区域内多个子项的层叠或对齐？用
z-index或justify-self/align-self，别碰order
容易漏掉的兼容性与语义细节
这套方案看着干净，但有三个硬约束必须满足，否则整个布局会退化成普通文档流：
-
grid-area值必须和grid-template-areas中声明的名称**逐字匹配**，多空格、少引号、大小写不一致都会失效 - IE11 不支持
grid-template-areas，若需兼容，得用@supports降级到 Flex +order，或服务端输出两套结构 - 屏幕阅读器仍按 HTML 顺序读取，所以
header标签仍得放在 DOM 最前面——grid-template-areas只管视觉，不管语义
真正需要顺序切换的场景（比如表单步骤、导航焦点流），光靠 CSS 不够；HTML 结构本身得合理，CSS 只负责把它“画对”。
