如何仅用CSS实现HTML项目的等高二列布局

Hey there! 完全可以用纯CSS实现你要的这种两列高度尽可能均衡、按特定交叉顺序排列的布局（就是你要的1 5 2 6 3 7 4这种，绝对不会出现按高度流的排列），不用依赖JavaScript计算索引。下面给你两种靠谱的方案：

利用CSS Grid的行列定位能力，我们可以让后半部分的元素和前半部分的元素一一对应到同一行，最后多出来的那个元素（奇数个项目时）单独占一行，完美实现均衡高度。

代码实现 #

首先给容器定义Grid布局，再用CSS变量动态计算元素位置：

/* 容器样式 */
.balanced-columns {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两等宽列 */
  gap: 1.5rem; /* 可选，列间距，按需调整 */
  counter-reset: item-counter; /* 自动生成元素索引，不用手动加 */
}

/* 自动给每个元素设置索引变量 */
.balanced-columns > * {
  counter-increment: item-counter;
  --item-index: counter(item-counter);
}

/* 第一列元素：前 ceil(total/2) 个 */
.balanced-columns > :nth-child(-n + calc((var(--total-items) + 1) / 2)) {
  grid-column: 1;
}

/* 第二列元素：剩下的，对应到第一列的行 */
.balanced-columns > :nth-child(n + calc((var(--total-items) + 1) / 2 + 1)) {
  grid-column: 2;
  /* 计算对应行：当前索引 - 第一列元素数量 */
  grid-row: calc(var(--item-index) - calc((var(--total-items) + 1) / 2));
}

HTML结构 #

只需要给容器指定总项目数的CSS变量就行：

<!-- 比如7个项目，就设置--total-items:7 -->
<div class="balanced-columns" style="--total-items:7">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

如果更习惯用Flex，也可以通过调整order属性让元素交叉排列，再配合换行和宽度设置实现效果。

代码实现 #

/* 容器样式 */
.balanced-columns-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  counter-reset: item-counter;
}

.balanced-columns-flex > * {
  flex: 0 0 calc(50% - 0.75rem); /* 减去一半gap，保证两列等宽 */
  counter-increment: item-counter;
  --item-index: counter(item-counter);
}

/* 前半部分元素用奇数order，后半部分用偶数order，实现交叉排列 */
.balanced-columns-flex > :nth-child(-n + calc((var(--total-items) + 1) / 2)) {
  order: calc(2 * (var(--item-index) - 1) + 1);
}

.balanced-columns-flex > :nth-child(n + calc((var(--total-items) + 1) / 2 + 1)) {
  order: calc(2 * (var(--item-index) - calc((var(--total-items) + 1) / 2)));
}

HTML结构 #

和Grid方案一样，给容器设置--total-items变量即可：

<div class="balanced-columns-flex" style="--total-items:7">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

小提示 #

• 两种方案都需要提前知道总项目数，通过--total-items变量传递，这是纯CSS实现的必要前提（毕竟CSS没法直接获取子元素数量）。
• 如果你用的是框架（比如React/Vue），可以很方便地动态设置这个变量；静态HTML的话手动改一下就行，适配5-10个项目完全没问题。

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