用 order 属性可让第二列内容视觉上优先显示，但需父容器设 display: grid、子元素为直接子项且未设置 grid-row/column；order 仅改视觉顺序，不影响 DOM、焦点和可访问性顺序。
直接用 grid-template-columns 无法改变渲染顺序
两列等宽只需 grid-template-columns: 1fr 1fr，但 Grid 默认严格按 DOM 顺序从左到右、从上到下填充——第二列内容不会“优先”出现在视觉前端。所谓“第二列内容优先”，本质是希望它在视觉流中排第一，而不是靠后。这不是列定义能解决的问题，得动顺序本身。
用 order 属性调整子项视觉位置
order 是唯一能在不改 DOM 的前提下让第二列内容“看起来先出现”的标准手段。但必须满足几个硬性条件：
- 父容器必须设
display: grid（仅写grid-template-columns不够） - 要调整顺序的元素必须是 Grid 容器的直接子元素，不能套了额外 wrapper
- 不能同时设置
grid-row或grid-column，否则order被忽略 - 若第二列内容对应的是第 2 个子元素，可设
order: -1；第一个子元素设order: 0（默认值），这样它就会视觉上排在第二列内容之后
示例：
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.grid > :nth-child(1) { order: 0; }
.grid > :nth-child(2) { order: -1; }
注意 order 不等于可访问性顺序
order 只改视觉排列，DOM 顺序、Tab 键焦点顺序、屏幕阅读器读取顺序全都不变。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 键盘用户 tab 到第一个子元素时，焦点仍在 DOM 第一个位置，哪怕它视觉上被挤到了右边
- 响应式断点里来回切
order值，容易导致焦点跳转错乱 - 如果真实需求是“移动端第二列内容必须最先交互”，
order是障眼法，应考虑 JS 动态重排 DOM 或服务端输出不同结构
替代方案：用 grid-auto-flow: column 换流向
如果两列内容本身是平级子项（比如 4 个卡片想排成 2 行 × 2 列，但希望第 2、4 个先占第一列），可尝试列向填充：
- 设
grid-template-rows: auto auto（固定两行） - 设
grid-auto-flow: column（按列填：先填第 1 列两行，再填第 2 列两行） - 此时 DOM 顺序决定列内顺序：第 1 个子项 → 第 1 列第 1 行，第 2 个子项 → 第 1 列第 2 行，第 3 个 → 第 2 列第 1 行……
这能让“第二列内容”在视觉上更早占据左侧空间，但前提是你的数据结构和 DOM 排列能配合这种列优先逻辑——不是所有场景都适用。
真正难的从来不是怎么写那几行 CSS，而是想清楚：你到底要“视觉上提前”，还是“交互与语义上提前”。后者绕不开 DOM 重排或结构预置。
