grid-area最直观高效，通过命名区域实现脱离dom顺序的精准定位；grid-row/column适合轻量线号定位但需防越界；order在grid中仅对未显式定位项生效；响应式推荐改grid-template-areas配合固定grid-area。
用 grid-area 直接指定位置最直观
如果你已经给网格容器设了 grid-template-areas，那每个子元素用 grid-area 命名就能立刻“跳”到对应区域，顺序完全脱离 DOM 顺序。比如：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
即使 HTML 中 <main></main> 写在 <sidebar></sidebar> 前面，它也会被塞进右侧的 main 区域——grid-area 的优先级高于源顺序。
注意：grid-area 是简写，等价于 grid-row-start grid-column-start grid-row-end grid-column-end，所以它能一次性控制四条线，比单独设 grid-row / grid-column 更精准、更少歧义。
grid-row 和 grid-column 适合微调行列跨度
当不需要命名区域、只想按行/列线号定位时，grid-row 和 grid-column 更轻量。但容易踩的坑是：它们只控制起止线号，不处理重叠或越界。
立即学习“前端免费学习笔记（深入）”；
- 写成
grid-row: 2等价于grid-row-start: 2; grid-row-end: 3（默认占 1 行） - 想跨两行？得写
grid-row: 2 / 4或grid-row: 2 / span 2 - 如果目标行线不存在（比如容器只有 3 行，却写
grid-row: 5），浏览器会隐式创建新轨道，但布局可能意外撑高
这种写法对动态内容风险稍高——比如 JS 插入新元素后没同步更新 grid-row，就容易叠在一起或错位。
别依赖 order 在 Grid 里调序
order 属性在 Flexbox 里常用，但在 Grid 中它只影响**源顺序相同且未显式定位**的项目（即没设 grid-row/grid-area 的那些）。一旦用了任何定位属性，order 就失效了。
换句话说：你写了 grid-row: 3，再加 order: -1 也没用——位置由 grid-row 决定，order 被忽略。
所以真要调序，要么统一用 grid-area（推荐），要么全用 grid-row + grid-column，别混用 order 增加不可控变量。
响应式重排时，grid-area 配合媒体查询最稳
想在小屏把 sidebar 从右侧挪到主内容下方？直接改 grid-template-areas，再让对应元素保持同名 grid-area 即可：
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
这样所有定位逻辑集中在容器上，子元素不用改样式，也不用重复写 grid-row 规则。比在每个断点里重写十几行 grid-row 清晰得多。
真正麻烦的是跨区域合并（比如让一个元素横跨 header + main），这时候必须用 grid-area: 1 / 1 / 3 / -1 这类线号写法，不能靠命名——因为 grid-template-areas 要求矩形块，无法表达 L 形覆盖。
