在css grid布局中，元素在页面上的显示顺序并不总是和html结构中的先后一致。造成这种问题的原因主要有两个：一是没有显式指定网格位置，浏览器按自动流排布可能产生错位；二是使用了order属性或源顺序与网格坐标冲突。我们可以通过grid-row、grid-column精确控制位置，或用order调整视觉顺序。
为什么grid元素顺序会不对
当容器设置为display:grid且没有给子项指定行列坐标时，子项会按照源码顺序自动流入网格。如果中间某个元素跨行跨列，后面的元素就可能被挤到意料之外的格子。此外，order属性默认值为0，若给某些项设置了大于0的值，它们会排在后面，但这只影响视觉顺序，不影响dom顺序。
使用grid-row和grid-column固定位置
最直接的方式是给网格项显式分配坐标，这样无论html怎么写，它都会出现在对应的区域。
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 80px 80px;
}
.item-a {
grid-row: 1;
grid-column: 2;
}
.item-b {
grid-row: 2;
grid-column: 1;
}
上面代码中，item-a被放到第一行第二列，item-b放到第二行第一列，顺序完全由坐标决定。
使用order属性调整视觉顺序
如果不想写死行列，只是想让某些元素提前或靠后，可以用order。值越小越靠前，默认是0。
<div class="container"> <div class="box b1">一</div> <div class="box b2">二</div> <div class="box b3">三</div> </div>
.container { display: grid; grid-template-columns: repeat(3, 80px); }
.b2 { order: -1; }
此时b2会排到最前，显示顺序变为二、一、三，但dom里仍是原顺序。
两种方式怎么选
- 需要严格网格排版、避免错位：用grid-row和grid-column
- 仅做视觉重排且结构不变：用order更灵活
- 响应式场景下建议用坐标，order容易在媒体查询中混乱
小结
遇到css grid元素顺序不对，先检查是否漏写网格坐标，再用grid-row、grid-column定位；若只是微调展示顺序，order属性更轻量。弄清二者差异即可稳定控制布局。