如何使用CSS实现含不同高度子元素、列元素数可变的多列网格布局

实现方案 #

纯CSS可以实现该需求，使用CSS多列（column）布局即可解决flex布局排序不符合要求、grid布局强制等高的问题。

核心思路 #

• 用多列布局实现列满自动向右新增列，无横向滚动
• 配合奇偶选择器控制元素左右分布，用浮动实现同一行两个元素的排布，避免强制等高

代码示例 #

HTML结构

<div class="container">
  <div class="item">元素1（高度不定）</div>
  <div class="item">元素2（高度不定）</div>
  <div class="item">元素3（高度不定）</div>
  <!-- 更多元素 -->
</div>

CSS样式

.container {
  width: 100%;
  /* 单排总宽度 = 左侧元素宽度 + 右侧元素宽度 + 元素左右间距，可自定义 */
  column-width: 240px;
  /* 列与列之间的间距，可自定义 */
  column-gap: 20px;
}

.item {
  /* 单个元素固定宽度，可自定义 */
  width: 110px;
  /* 避免单个元素被拆分到两个列 */
  break-inside: avoid;
  /* 元素上下间距，可自定义 */
  margin-bottom: 10px;
}

/* 奇数元素居左 */
.item:nth-child(odd) {
  float: left;
}

/* 偶数元素居右，清除浮动保证下一组元素换行 */
.item:nth-child(even) {
  float: right;
  clear: both;
}

方案说明 #

• 多列布局会自动按照设置的列宽计算容器可容纳的列数，内容从上到下填充完一列后自动向右新增列，不会出现横向滚动
• 每个元素高度由自身内容决定，不会被强制拉升为同列/同行等高
• 元素排序完全按照DOM节点顺序，奇数元素固定在列左侧，偶数在右侧，符合需求

内容的提问来源于stack exchange，提问作者kodonnell-heila