如何仅用CSS实现元素成对互换（元素数量不固定）

需求说明 #

• 将元素按第1个与第2个互换、第3个与第4个互换的规则依次交换位置
• 元素数量不固定，支持奇数或偶数个元素的场景

现有场景 #

预期效果 #

方案一：JavaScript DOM操作（修改实际DOM结构） #

适合需要真正调整DOM顺序的场景，比如元素需要参与后续DOM操作的情况。

// 替换为你的容器选择器
const container = document.querySelector('.target-container');
const items = Array.from(container.children);

// 步长为2遍历，处理每一对元素
for (let i = 0; i < items.length; i += 2) {
  // 仅当存在下一个元素时执行交换
  if (items[i + 1]) {
    container.insertBefore(items[i + 1], items[i]);
  }
}

说明：

• 先获取目标容器的所有子元素并转为数组
• 循环步长设为2，每次处理相邻的一对元素
• 使用insertBefore方法交换位置，若元素总数为奇数，最后一个元素会保留在原位

方案二：CSS Grid布局（仅修改显示顺序） #

适合仅调整视觉布局、不需要改动DOM结构的场景，代码更简洁且无JS运行开销。

/* 容器设置为Grid布局，根据需求调整列宽 */
.target-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 180px); /* 示例列宽，可根据实际修改 */
  gap: 16px; /* 元素间距，可选 */
}

/* 让偶数位置的元素排在前一个元素之前 */
.target-container > :nth-child(2n) {
  order: -1;
}

说明：

• 通过Grid的order属性调整元素显示顺序，不改变实际DOM结构
• auto-fill会自动根据容器宽度适配列数，保证每两个元素能在同一行（横向布局场景）
• 若元素总数为奇数，最后一个元素会正常显示在末尾

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