求助：实现900x900px容器内元素高度超限自动分两列布局（CSS/SCSS）

开发者阿泽

2026-7-13

实现垂直填满后自动分两列的布局方案

你要的这种垂直排满容器高度后自动切换到第二列的布局，用CSS多列布局（Columns）或者Grid布局都能轻松实现，给你两个可行的方案：

方案一：CSS 多列布局（Columns）

Columns布局天生适配这种“内容沿垂直方向排满一列后自动转入下一列”的场景，代码简洁直接：

HTML 结构

<div class="box">
  <div class="element"></div>
  <div class="element"></div>
  <!-- 根据需求重复添加足够多的.element元素 -->
</div>

CSS 样式

.box {
  width: 900px;
  height: 900px;
  columns: 2; /* 指定列数为2 */
  column-gap: 20px; /* 可选：设置列之间的间距 */
  border: 1px solid #eee; /* 可选：方便查看容器范围 */
}

.element {
  width: 70px;
  height: 70px;
  margin-bottom: 10px; /* 可选：设置元素之间的垂直间距 */
  break-inside: avoid; /* 关键属性：防止单个元素被拆分到两列 */
  background-color: #42b983; /* 可选：方便查看元素 */
}

方案二：Grid 布局

如果更习惯用Grid，可以通过调整内容流动方向实现需求，让内容先填满垂直方向的行，再自动新增列：

CSS 样式（HTML结构同上）

.box {
  width: 900px;
  height: 900px;
  display: grid;
  grid-template-rows: repeat(auto-fill, 70px); /* 自动生成高度为70px的行，直到填满容器高度 */
  grid-auto-flow: column; /* 设置内容流动方向：先按行排列，满行后新增列 */
  grid-row-gap: 10px; /* 可选：行间距 */
  grid-column-gap: 20px; /* 可选：列间距 */
  border: 1px solid #eee;
}

.element {
  width: 70px;
  height: 70px;
  background-color: #42b983;
}