css columns

/* 使用 CSS columns 实现多列布局 */

.container {
  column-count: 3; /* 设置列的数量为3 */
  column-gap: 20px; /* 设置列之间的间距为20px */
}

.item {
  background-color: #f1f1f1;
  padding: 10px;
  margin-bottom: 10px;
  break-inside: avoid; /* 避免内容在列之间被拆分 */
}

解释说明：

• column-count: 定义了容器中的列数。在这个例子中，我们设置了3列。
• column-gap: 定义了列与列之间的间距。这里设置为20px。
• break-inside: avoid: 防止元素在列之间被拆分，确保每个 .item 元素完整地显示在一列内。

你可以将这些样式应用到一个包含多个子元素的容器中，例如：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>