order仅对Grid直接子元素且未显式定位时生效，纯视觉重排不改DOM、焦点或屏幕阅读器顺序；失效主因是父容器未设display:grid、目标非直接子元素或存在grid-row/column/area声明。
直接说结论：order 只在 Grid 容器的直接子元素未被显式定位时才生效，它不改 DOM、不改焦点流、不改屏幕阅读器顺序——纯视觉重排，不是结构重排。
为什么写了 order 却没效果
最常见原因就三个：
- 父容器没设
display: grid（只写grid-template-columns或gap不够） - 目标元素不是 Grid 容器的**直接子元素**（中间套了
div就失效） - 该元素写了
grid-row、grid-column或grid-area——显式定位优先级高于order，一写就忽略
另外，如果父容器用了 display: contents，子元素会“冒泡”到外层 Grid，原 order 位置错乱，得把 order 移到真正参与布局的节点上。
order 的排序逻辑不是“数值越小越前”
它的实际规则是分组 + 稳定排序：
立即学习“前端免费学习笔记（深入）”；
- 所有负数 > 所有
0> 所有正数 - 同组内严格按 HTML 源码顺序排列（不是按数值大小）
-
order: -1和order: -99都在“负数组”，谁在 HTML 里靠前，谁就视觉靠前 -
order: 0是默认值，不写等价于order: 0；多个order: 0元素按源码顺序填入可用网格单元
所以别用 order: 999 表示“最后”，改用 order: 1 显式控制其他项为 order: 0 或 order: -1，更易维护。
order 和 grid-auto-flow 的配合陷阱
order 只在自动放置阶段起作用，而 grid-auto-flow 决定了这个阶段的填充方向和分组逻辑：
-
grid-auto-flow: row（默认）→order按行内从左到右比较 -
grid-auto-flow: column→order按列内从上到下比较，不同列之间不跨列排序 -
grid-auto-flow: column dense→ 浏览器会主动“填空”，高order值的项可能被提前塞进空隙，行为难预测 - 横向布局下给 5 个项都设
order: 0，结果前两个并排显示——因为它们被分到了不同行，order不跨行竞争
也就是说，order 不是全局排序，它只在当前自动填充路径的“同一批次”里起作用。
响应式切换 order 的真实代价
用媒体查询来回切 order 值，表面是纯 CSS 方案，实则埋了双坑：
- 键盘用户缩放页面后 Tab 键可能跳到意料之外的位置，焦点流不可预测
- 频繁修改
order会触发重排（reflow），尤其在低端设备上可能出现短暂闪动或卡顿 - 若真实需求是“移动端把导航放底部、桌面端放顶部”，别硬套
order；应优先用 JS 动态移动 DOM 节点，或服务端/构建时输出
最容易被忽略的一点：你调完 order 后看到视觉对了，但用 Chrome 的 Accessibility 面板检查 accessibility tree，会发现节点顺序还是原始 HTML 顺序——这对依赖辅助技术的用户来说，是彻底的逻辑断裂。
