如何用CSS Grid实现特定两列布局：首列满3个元素后填充次列

一、静态场景（元素顺序固定，前3个放第一列） #

要是元素顺序固定，不用动态调整位置，纯CSS Grid就能搞定，不用写JS：

CSS代码 #

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽，宽度可以自己调 */
  gap: 10px; /* 元素之间的间距，按需改 */
}

/* 前3个元素固定在第一列 */
.container > .item:nth-child(-n+3) {
  grid-column: 1;
}

/* 第4个及以后的元素固定在第二列 */
.container > .item:nth-child(n+4) {
  grid-column: 2;
}

HTML示例 #

<div class="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item">元素3</div>
  <div class="item">元素4</div>
  <div class="item">元素5</div>
</div>

这种方法纯CSS实现，不用JS，适合那种元素顺序固定的场景。

二、动态场景（按第一列当前数量决定新增元素位置） #

如果需要动态加元素时，先把第一列填满3个，之后新增的都放第二列；要是第一列元素少于3个，后续新增的还是优先放第一列，就得结合JS来控制：

HTML结构 #

<div class="container">
  <div class="column column-1"></div>
  <div class="column column-2"></div>
</div>
<button onclick="addItem()">新增元素</button>

CSS代码 #

.container {
  display: flex;
  gap: 10px;
}

.column {
  flex: 1; /* 两列宽度平分 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item {
  padding: 15px;
  background: #eee;
  border-radius: 4px;
}

JS代码 #

function addItem() {
  const column1 = document.querySelector('.column-1');
  const column2 = document.querySelector('.column-2');
  const newItem = document.createElement('div');
  newItem.className = 'item';
  newItem.textContent = `元素${document.querySelectorAll('.item').length + 1}`;

  // 查第一列的元素数量，少于3就放第一列，不然放第二列
  if (column1.children.length < 3) {
    column1.appendChild(newItem);
  } else {
    column2.appendChild(newItem);
  }
}

这种方式逻辑直观，也容易维护，完全能满足动态添加的需求。如果不想把容器拆成两个列div，也可以用Grid配合JS给新增元素设grid-column属性，但拆分列的方式更简单好懂。

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