请使用css column写一个多列布局

CSS Columns 提供了一种简单而强大的方式创建多列布局，无需复杂的浮动或定位。以下是一个使用 column-count 和其他相关属性的示例：

<!DOCTYPE html>
<html>
<head>
<title>CSS Columns 多列布局</title>
<style>
.container {
  column-count: 3; /* 三列布局 */
  column-gap: 20px; /* 列间距 */
  column-rule: 1px solid #ddd; /* 列分割线 */
  width: 600px;
  margin: 0 auto; /* 水平居中 */
}

.item {
  padding: 10px;
  background-color: #f0f0f0;
  margin-bottom: 10px;
  break-inside: avoid; /* 避免项目在列之间断开 */
}
</style>
</head>
<body>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2 - This is a longer item to demonstrate column wrapping.</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 class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

</body>
</html>

代码解释:

column-count: 3;: 将容器 .container 分成三列。
column-gap: 20px;: 设置列之间的间距为 20px。
column-rule: 1px solid #ddd;: 添加 1px 宽的实线作为列分割线，颜色为 #ddd (浅灰色)。这相当于同时设置 column-rule-width、column-rule-style 和 column-rule-color。
width: 600px; margin: 0 auto;: 设置容器宽度并使其水平居中。
break-inside: avoid;: 这是一个重要的属性，它防止 .item 元素在列之间断开。如果没有这个属性，长文本内容可能会在列之间断开，导致阅读体验不佳。

其他 CSS Columns 属性:

除了上面提到的属性，还有其他一些常用的 CSS Columns 属性：

column-width: 设置列的宽度。如果同时设置了 column-count 和 column-width，浏览器会优先满足 column-width，并根据需要调整列的数量。
column-fill: 控制列的填充方式。可以设置为 balance (平衡列高度) 或 auto (自动填充)。
column-span: 允许一个元素跨越所有列。
column-rule-width, column-rule-style, column-rule-color: 分别设置列分割线的宽度、样式和颜色。