先记住这个答案
Grid 的自动放置按 order 修正后的文档顺序遍历项目。默认每个项目都是 order: 0，因此通常看起来就是 DOM 顺序；把某张卡设为负值，它会先占自动放置的位置。这个变化只影响布局和绘制，不会重排 DOM、读屏文本或常规键盘焦点顺序。
- 自动放置按
order修正后的顺序处理 - 默认
order: 0，数值小的先放 - 视觉重排不会改变 DOM 和阅读顺序
- 关键信息顺序应在 HTML 中确定
卡片提前显示时发生了什么
假设有三张按 A、B、C 写在 HTML 里的卡片，两列网格会先给 A 和 B 找位置，再把 C 放到下一行。现在希望 C 在视觉上先出现，可以改它的 order；浏览器寻找空位时便先处理 C。
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cards .featured { order: -1; } /* C 在视觉上先占左上角 */A、B、C 的 HTML 位置没有动。假如 C 是促销卡，视觉强调可能合理；假如 C 是解释 A、B 必须先读的步骤，读屏顺序和视觉顺序就会冲突。
对已经指定 grid-column 或 grid-row 的项目，还要看显式位置是否占用目标单元格。不能把 order 理解成覆盖所有定位规则的绝对排序。
交互内容应以文档顺序为准
用户按 Tab 键时，焦点跟随文档中的交互控件顺序。若按钮视觉上从左到右是 C、A、B，焦点却依次跳到 A、B、C，会让人难以预测下一步。屏幕阅读器通常也沿源代码语义阅读。
布局需求只涉及装饰或同级卡片时，可以用 order 微调；涉及操作流程、文章章节、表单步骤时，先调整 HTML 顺序，再用 Grid 安排位置。需要移动端和桌面端不同布局时，也要分别检查视觉顺序与焦点顺序是否一致。
实际验收时，可以只用键盘从页面顶部开始按 Tab：如果焦点先跳到视觉上第二张卡，再跳回第一张，说明视觉顺序已经妨碍操作。order 也不会改变 querySelectorAll() 拿到的节点顺序；若代码按 DOM 顺序给步骤编号，截图中的卡片顺序可能与编号对不上。给纯装饰卡片调顺序通常问题较小，给表单步骤或导航按钮调顺序则应先改标记。
容易答错的地方
- 把
order当成修改 DOM - 开发者工具里的节点位置不会因为
order改变。事件委托、兄弟节点选择、读屏顺序仍以原来的结构为基础；不要拿视觉截图推断文档结构。 - 认为数值越大越靠前
- 默认值是
0，数值小的先参与排序。负值可提前，正值通常排在默认项目后面；同值保持原文档顺序。
面试官还会怎么问？
grid-auto-flow: dense 会影响顺序吗？
会影响视觉占位。它可能回填前面的空格，让后续项目看起来提前，但 DOM 和阅读顺序仍不变，因此交互内容尤其要谨慎。
order 对 Flexbox 也有同样的问题吗？
有。Flex 项目的视觉排列会变，源代码顺序和焦点导航不会跟着改。
如果必须让移动端先显示 C，怎么做？
先判断 C 是否应该在语义上也排第一。如果是，就把 C 放到 HTML 前面；如果只是视觉强调，可用样式调整并实际检查焦点路径。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。