grid只能重排视觉顺序，不能改变dom顺序；真正改变dom顺序必须用javascript。grid-template-areas在媒体查询中切换模板是最直观、语义最清晰的“重排”方式，适合头部/主内容/侧边栏/底部等明确区块，移动端只需修改模板字符串即可将侧边栏提到顶部，每个子元素须显式设置grid-area且名称完全一致，ie不支持需fallback至flex的order或服务端响应式。
不能靠 Grid 重排 DOM 顺序，只能重排视觉顺序；真正改变 DOM 顺序必须用 JavaScript。
grid-template-areas 在媒体查询中切换区域模板
这是最直观、语义最清晰的“重排”方式，适合头部/主内容/侧边栏/底部这类明确区块。移动端把侧边栏提到顶部，只需改模板字符串：
.container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 250px 1fr 1fr;
}
}
- 每个子元素必须显式设置
grid-area，且值要和grid-template-areas中的名称完全一致（大小写、空格、引号都不能错） - 模板字符串每行代表一行轨道，列之间用空格分隔，整行必须用双引号包裹，不能换行写
- IE 不支持
grid-template-areas，若需兼容，得 fallback 到 Flex 的order或服务端响应式
用 grid-row / grid-column 精准控制单个元素位置
适合局部调整，比如把某个按钮从右侧移到左上角，或让广告位在列表中间插入并跨两行：
.ad-banner {
grid-row: 1;
grid-column: 1 / -1;
}
@media (min-width: 768px) {
.ad-banner {
grid-row: 3;
grid-column: 2 / 3;
}
}
- 移动端默认设
grid-row: 1+grid-column: 1 / -1让它占满整行，桌面端再微调坐标 - 避免在 JS 中动态修改
grid-row或grid-column—— 这些属性不可动画化，且频繁写入会触发隐式重排 - 如果多个元素共用同一网格单元（如都设
grid-row: 1; grid-column: 1），它们会层叠，此时需配合position: relative和z-index控制层级
为什么不能用 display: contents 或 order 混用
常见误操作是给父容器设 display: grid，又给子项加 order——Grid 布局下 order 完全无效，它只在 Flex 布局中起作用。
-
display: contents会让元素“消失”于渲染树，但其子节点直接参与父 Grid 布局，此时grid-area或grid-column必须写在子节点上，否则整个区块不渲染 - 想用
order，必须把父容器设为display: flex或display: inline-flex，且所有子项都要显式设order（默认值都是 0，不设就全挤一起） - Flex 的
order和 Grid 的grid-row是互斥方案，混用会导致行为不可预测，调试时 DevTools 的 Layout 面板会显示“ignored”
真正需要 DOM 顺序变化（比如可访问性阅读器读取顺序、SEO 内容权重、键盘 tab 顺序）时，grid-template-areas 和 grid-row 都无能为力——它们只管怎么画，不管怎么存。这时候得老老实实操作 DOM，别绕弯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
