CSS Grid 提供 grid-row/grid-column 显式定位和 order 属性两种方式调整视觉顺序：前者通过网格线精确定位，无视 DOM 顺序；后者仅改变同级子项排列优先级，默认值为 0，数值越小越靠前，但不改变 DOM 顺序与焦点顺序。
Grid 布局中元素视觉顺序和 DOM 顺序不一致时，别急着重排 HTML 结构。CSS Grid 提供了两种主流方式来调整显示顺序：用 grid-row / grid-column 显式定位，或用 order 属性控制层叠与流式排列顺序。
用 grid-row 和 grid-column 精确指定位置
适用于需要固定布局、每个项目都明确落在哪一行哪一列的场景。只要给子元素设置具体的行/列起止线，就能完全绕过文档流顺序的影响。
- 写法示例：
grid-row: 2 / 4;表示从第 2 条网格线开始，到第 4 条结束（占第 2、3 行） -
grid-column: 1 / -1;可让某个元素横跨全部列（-1 指最后一根线） - 即使 HTML 中它排在第一个，也能让它显示在右下角——DOM 顺序完全不影响定位结果
用 order 属性调整 flex/grid 子项的视觉顺序
当希望保持 HTML 结构语义化（比如 SEO、可访问性），又想改变视觉流顺序时，order 是更轻量的选择。它只影响同级子项之间的排列优先级，默认值为 0。
- 数值越小越靠前，支持负数：
order: -1;的元素会排在所有order: 0;元素之前 - 注意：order 不改变 DOM 顺序，也不影响 tab 键焦点顺序（如需同步键盘导航，得配合
tabindex或 aria 属性） - 仅对直接子元素生效，且父容器必须是
display: grid或display: flex
别混淆：order 和 grid-area 的适用边界
order 适合简单前后调换（如把“侧边栏”移到主内容前面），而 grid-row/grid-column 更适合复杂二维定位（如卡片错位瀑布、标题跨多行）。二者可共存，但 grid-row/grid-column 的显式定位优先级高于 order。
立即学习“前端免费学习笔记（深入）”；
- 如果同时设置了
order: 1和grid-row: 3，它仍会出现在第 3 行，order在该格子内才参与同格子多元素的层叠排序 - 避免滥用
order大范围调序，易导致维护困难；结构变化大的布局，优先考虑语义化 HTML + 显式网格线
不复杂但容易忽略：调整顺序前，先确认父容器已设 display: grid 并定义好 grid-template-rows / grid-template-columns，否则 grid-row 和 grid-column 可能无效。
