如何仅移动CSS Grid中的单个项目而不改变其他元素的顺序？

嘿，这个问题问到点子上了！你说得没错，grid-template-areas需要定义所有区域，order如果操作不当可能要折腾一堆元素，但其实只针对要互换的两个元素操作就能搞定，完全不用碰其他网格项的样式，下面给你两种最直接的方法：

方法1：用grid-column/grid-row直接定位 #

你的网格是3行2列的布局：grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr);，默认情况下，HTML里先出现的元素会优先填充网格的第一列第一行，接着是第二列第一行，然后是第一列第二行，以此类推。

要把第1行第1列的元素（假设类名为.item1）和第1行第2列的元素（类名为.item2）互换，只需要给这两个元素设置具体的网格位置就行：

.item1 {
  grid-column: 2 / 3; /* 把.item1放到第2列 */
  grid-row: 1 / 2;    /* 保持在第1行 */
}

.item2 {
  grid-column: 1 / 2; /* 把.item2放到第1列 */
  grid-row: 1 / 2;    /* 保持在第1行 */
}

这种方式是直接指定元素要占据的网格区域，其他元素会自动填充剩下的网格位置，完全不需要修改它们的样式，代码量极少，也最直观。

方法2：仅给目标元素设置order属性 #

如果更倾向于用order，也不用给所有元素设置值——因为所有网格项的默认order都是0，同order值的元素会按照HTML中的顺序排列。

假设你的HTML里.item1在.item2前面，默认.item1会排第1列，.item2排第2列。要互换的话，只需要给这两个元素设置不同的order值：

.item1 {
  order: 1; /* 让.item1的排列优先级降低 */
}

.item2 {
  order: 0; /* 保持默认优先级（其实可以不写，这里是为了明确逻辑） */
}

这样.item2会因为order值更小，优先占据第1行的第一个可用列，.item1则会排到第2列，同样实现了互换，而且只需要修改这两个元素的样式。

总结 #

这两种方法都不需要改动其他所有网格项，只针对要互换的两个元素写几行代码，比grid-template-areas要简洁得多，完全符合你想要的“简便实现”需求~

内容的提问来源于stack exchange，提问作者Frontmaniaac