grid-row 和 grid-column 仅控制网格项布局位置，不改变dom顺序、可访问性或打印样式；真正影响视觉排序的是order属性，需配合display: grid使用，且order只对直系子元素生效，默认值为0，数值越小越靠前。
grid-row 和 grid-column 不能改变视觉顺序，只能控制位置
很多人以为给网格项设置 grid-row 或 grid-column 就能“重排顺序”，结果发现 DOM 顺序没变、可访问性出问题、打印样式错乱——这是因为这两个属性只决定**布局位置**，不改变文档流顺序或渲染层级逻辑。真正影响“排序”的是 order 属性（作用于 flex / grid 容器的子项），但仅限于同一层网格轨道内调整显示次序。
想让网格项按新顺序渲染，优先用 order + display: grid
如果容器是 display: grid，且子项需要视觉上重新排序（比如把第 3 个元素显示在最前面），必须配合 order 使用。注意：order 只对直系子元素生效，且默认值为 0，数值越小越靠前。
-
order不会影响grid-row/grid-column的定位能力，二者可共存 - 若同时设置了
grid-row和order，grid-row决定“在哪格”，order决定“和同层其他项比谁更靠前”（影响层叠和部分渲染顺序） - 屏幕阅读器仍按 html 顺序读取，如需语义化重排，应直接调整 DOM 节点位置
.container { display: grid; grid-template-columns: repeat(3, 1fr); } .item:nth-child(1) { order: 2; } .item:nth-child(2) { order: 0; } /* 视觉上第一个 */ .item:nth-child(3) { order: 1; }grid-row / grid-column 配合 span 能“跨位占位”，但不是排序
当你写 grid-row: 2 / 4，只是让这个元素从第 2 行开始、占到第 4 行前为止；它不会把原本在第 2 行的其他元素“挤下去”。网格轨道是静态划分的，每个格子独立存在，项之间没有流式推挤关系。
- 多个项指定相同
grid-row起始线时，它们会按 DOM 顺序依次堆叠（z-index 默认由源顺序决定） - 想避免重叠，需确保
grid-row和grid-column的范围不冲突，或用z-index显式控制层叠 - 动态计算行号？别硬算，改用
grid-area命名区域 +grid-template-areas更直观
真正要“排序”，得看你是改视觉、DOM 还是语义
这三者常被混为一谈，但技术路径完全不同：
立即学习“前端免费学习笔记（深入）”；
- 仅视觉调整 → 用
order（适用于简单重排）或 javaScript 动态更新style.order - 需保持可访问性和 seo → 必须用 js 操作
appendChild/insertBefore改 DOM 顺序 - 响应式下不同断点换序 → 结合
@container或媒体查询 +order，但注意 safari 对order在 grid 中的支持较晚（≥ Safari 16.4） - 服务端已排序数据 → 前端就别折腾 css 排序，直接按序渲染 HTML
最容易被忽略的是：CSS 排序永远绕不开可访问性代价。哪怕 order 看起来完美，键盘 Tab 顺序、屏幕阅读器朗读顺序、打印样式表仍忠于原始 HTML 结构。