答案：CSS Grid 中可通过 grid-column、grid-row 和 grid-area 精确定位元素位置，改变视觉顺序；order 属性可调整顺序但作用有限；grid-auto-flow 控制自动排列方向，配合 dense 模式优化空间利用，实现灵活布局。
在 CSS Grid 布局中，子元素的排列顺序可以通过 grid-column 和 grid-row 属性来控制位置，也可以使用 order 属性来调整显示顺序。虽然 order 主要用于 Flexbox，在 Grid 中也有效，但更常见的是通过网格线定位来精确控制布局。
1. 使用 grid-column 和 grid-row 定位
你可以为每个子元素指定它应该从哪条网格线开始、结束，从而决定其在容器中的位置。
例如：.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
}
<p>.item1 {
grid-column: 1 / 2;
grid-row: 1;
}</p><p>.item2 {
grid-column: 3 / 4; /<em> 跳过第二列，直接放在第三列 </em>/
grid-row: 1;
}
这样，即使 HTML 中 item2 在 item1 后面，也能让它显示在更靠右的位置，实现视觉顺序与 DOM 顺序不同。
2. 使用 order 属性调整顺序
如果网格容器启用了 flex-like 排序行为（比如子项在同一轨道），可以使用 order 来改变主轴上的排列顺序。
立即学习“前端免费学习笔记（深入）”；
注意：order 属性在 CSS Grid 中的作用有限，仅在显式定义了网格流且项目共享轨道时才会影响顺序，通常不如在 Flexbox 中那样直观。
示例：.item1 { order: 2; }
.item2 { order: 1; }
此时，item2 会显示在 item1 前面，无论它们在 HTML 中的顺序如何。
3. 利用 grid-area 精确控制区域
对于复杂布局，推荐使用 grid-area，它可以一次性定义行、列的起止位置。
示例：.header {
grid-area: 1 / 1 / 2 / 4; /* 第1行到第2行，第1列到第4列 */
}
.sidebar {
grid-area: 2 / 1 / 3 / 2;
}
.content {
grid-area: 2 / 2 / 3 / 4;
}
通过这种方式，你可以完全打乱 DOM 顺序，在视觉上自由排列元素。
4. 配合 grid-auto-flow 改变填充方向
使用 grid-auto-flow 可以控制未明确指定位置的子元素如何自动排列。
可选值包括：- row：按行排列（默认）
- column：按列排列
- row dense 或 column dense：启用“紧密”模式，填补空隙
结合 grid-column 和 grid-row，dense 模式可以让被跳过的空间被后续元素填充，影响整体顺序。
基本上就这些方法。最实用的方式是用 grid-column 和 grid-row 直接控制位置，灵活又直观。order 在 Grid 中作用较小，适合简单排序场景。合理使用 grid-area 和 auto-flow 能让你轻松实现复杂的响应式布局顺序调整。
