如何基于类名实现div元素的单列交替排列？

方案一：SCSS + Flexbox（动态适配任意数量元素） #

利用SCSS循环自动生成每个元素的order属性，让.item1和.item2按1→2→1→2的顺序排列：

// 设置最大支持的元素数量，可根据需求调整
$max-item-count: 100;

.grid-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.item1, .item2 {
  opacity: 0.2;
}

// 为每个item1设置奇数order值
@for $i from 1 through $max-item-count {
  .item1:nth-child(#{$i} of .item1) {
    order: 2 * $i - 1;
  }
}

// 为每个item2设置偶数order值
@for $i from 1 through $max-item-count {
  .item2:nth-child(#{$i} of .item2) {
    order: 2 * $i;
  }
}

方案二：纯CSS + Grid（需预设元素数量上限） #

如果无法使用SCSS，可以手动为一定数量内的元素设置grid-row，强制它们占据交替的行位置：

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.item1, .item2 {
  opacity: 0.2;
}

// 为前8个item1设置奇数行
.item1:nth-child(1 of .item1) { grid-row: 1; }
.item1:nth-child(2 of .item1) { grid-row: 3; }
.item1:nth-child(3 of .item1) { grid-row: 5; }
.item1:nth-child(4 of .item1) { grid-row: 7; }
.item1:nth-child(5 of .item1) { grid-row: 9; }
.item1:nth-child(6 of .item1) { grid-row: 11; }
.item1:nth-child(7 of .item1) { grid-row: 13; }
.item1:nth-child(8 of .item1) { grid-row: 15; }

// 为前8个item2设置偶数行
.item2:nth-child(1 of .item2) { grid-row: 2; }
.item2:nth-child(2 of .item2) { grid-row: 4; }
.item2:nth-child(3 of .item2) { grid-row: 6; }
.item2:nth-child(4 of .item2) { grid-row: 8; }
.item2:nth-child(5 of .item2) { grid-row: 10; }
.item2:nth-child(6 of .item2) { grid-row: 12; }
.item2:nth-child(7 of .item2) { grid-row: 14; }
.item2:nth-child(8 of .item2) { grid-row: 16; }

说明 #

• 两种方案都依赖:nth-child(An+B of S)选择器，该选择器支持现代主流浏览器（Chrome、Firefox、Safari 14.1+、Edge），可精准选中某类元素中的第N个。
• SCSS方案只需设置一次$max-item-count，即可自动适配对应数量内的所有元素，完全动态。
• 纯CSS方案需要根据实际可能的元素数量，手动补充更多的:nth-child规则，适合无法使用预处理器的场景。

内容的提问来源于stack exchange，提问作者Laczkó Örs