如何使用CSS Grid动态调整Div排列顺序（偶数行元素互换）

要实现你要的效果，完全不用修改原有HTML结构，只通过CSS就能精准定位偶数行的元素，调整它们在网格中的列位置即可。具体步骤如下：

1. 基础Grid布局（保留你的代码并优化） #

先保留你定义的两列Grid布局，这里可以省略grid-template-rows: 1fr（Grid会自动根据内容创建行），同时加个间距让布局更清晰：

.section-grid {
  display: grid;
  grid-template-columns: 50% 50%; /* 两列各占50% */
  gap: 1rem; /* 可选：添加元素间距，提升可读性 */
}

/* 可选：给每个网格项加样式，方便看效果 */
.section-grid > div {
  padding: 1.5rem;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  text-align: center;
}

2. 动态调换偶数行元素位置 #

通过nth-child选择器精准定位偶数行的两个元素，再用grid-column属性调换它们的列位置：

/* 选中偶数行的第一个元素（第3、7、11...个），让它占第二列 */
.section-grid > div:nth-child(4n - 1) {
  grid-column: 2;
}

/* 选中偶数行的第二个元素（第4、8、12...个），让它占第一列 */
.section-grid > div:nth-child(4n) {
  grid-column: 1;
}

原理说明 #

• 你的Grid是两列布局，每2个元素会自动组成一行：第1-2个是第一行，第3-4个是第二行，第5-6个是第三行，以此类推。
• nth-child(4n - 1)：当n=1时选中第3个元素，n=2时选中第7个元素，刚好对应所有偶数行的第一个元素。
• nth-child(4n)：当n=1时选中第4个元素，n=2时选中第8个元素，对应所有偶数行的第二个元素。
• 通过设置grid-column调换列位置，就能实现偶数行元素互换，而且是完全动态的——不管你加多少元素，都会自动按“每两行一组，偶数行互换”的规则排列。

最终效果验证 #

用你提供的HTML结构：

<div class="section-grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

最终显示效果正好是：

One | Two
Four | Three
Five | Six
Eight | Seven

完美符合你的需求，而且完全保留了原有HTML标记。

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