如何仅用CSS实现动态元素按特定顺序排列的两列布局？

算力阿峰

2026-8-2

纯CSS实现指定顺序的两列布局

直接用CSS Grid就能搞定，核心思路是让元素先按列顺序排列，填满第一列的所有行后再填充第二列，正好匹配你要的每行对应关系。

步骤1：React渲染代码

给父容器动态设置总元素数量的CSS变量--total，子元素正常循环渲染即可：

<div className="number-container" style={{ '--total': numList.length }}>
  {numList.map(item => (
    <div key={item} className="number-item">{item}</div>
  ))}
</div>

步骤2：CSS代码

.number-container {
  /* 启用Grid布局 */
  display: grid;
  /* 设置两列等宽，可根据需求改成固定宽度，比如200px */
  grid-template-columns: 1fr 1fr;
  /* 关键规则：让元素先填满第一列所有行，再填充第二列 */
  grid-auto-flow: column;
  /* 动态计算第一列的行数：向上取整(总元素数/2) */
  --rows: math.ceil(var(--total) / 2);
  /* 根据计算出的行数生成行模板 */
  grid-template-rows: repeat(var(--rows), auto);
  /* 可选：设置元素间的间距 */
  gap: 12px;
}

.number-item {
  /* 可选：给元素加基础样式，方便查看效果 */
  padding: 8px;
  border: 1px solid #eee;
}