父容器未设display: grid时order无效；必须显式声明display: grid或inline-grid，仅grid-template-columns等设置不足；子元素若被grid-row等显式定位或脱离网格流，order亦失效。
父容器没设 display: grid，order 就是纯摆设
写了 order: -1 却没反应？第一反应不是查子元素，而是打开 DevTools 看父容器的 display 值。只要 computed styles 里不是 grid 或 inline-grid，所有 order、grid-row、gap 都不会起效——浏览器直接当普通块元素渲染，连警告都不给。
- 仅设置
grid-template-columns: 1fr 1fr不够，必须显式写display: grid - 用 CSS 框架（比如 Tailwind）时，
grid类可能被覆盖或未启用；检查是否意外加了flex或block - 父容器若用了
display: contents，它自己就“消失”了，子元素会冒泡到上层容器——此时你调的其实是外层容器的子项，根本不是你写的那个父级
子元素被显式定位“锁死”，order 彻底失能
哪怕父容器正确设置了 display: grid，只要任意一个子元素写了 grid-row、grid-column 或 grid-area，它的 order 就立即失效。浏览器优先执行轨道分配，不再让它参与自动排序流程。
立即学习“前端免费学习笔记（深入）”；
-
grid-row: 2的元素，无论order是-999还是999，都固定在第 2 行 -
grid-area: sidebar时，位置由grid-template-areas决定，order完全不参与计算 - 调试时可临时注释掉所有
grid-row/grid-column声明，再看order是否恢复作用
order 值本身被忽略的隐蔽原因
order 看似简单，但分组逻辑和响应式叠加容易埋坑：多个 order 值相同时，浏览器按 HTML 源顺序填入；负数归为一组、0 单独一组、正数归为另一组，组内不跨组比较。
-
order: -1和order: -100在同一组，谁在 HTML 里靠前，谁就视觉靠前 - 媒体查询中改
order，但没重置其他断点的值，导致残留值干扰（比如桌面端设了.item { order: 2 }，移动端只加@media (max-width: 768px) { .item { order: -1 } }，但选择器优先级不够，实际没生效） - 子元素用了
position: absolute或float，它已脱离网格流，order对它无效
真正要靠 order 实现可控排序，得先清掉所有显式定位声明，再统一用小范围整数（如 -1 / 0 / 1）分组，否则很容易陷入“DevTools 显示 order: 2，但它就是不动”的死循环。最麻烦的是，这种失效完全静默——没有报错，computed styles 也显示正常，只有布局不按预期走。
