css column

/* 使用 CSS columns 属性创建多列布局 */

.container {
  column-count: 3; /* 设置元素的内容分为三列 */
  column-gap: 40px; /* 设置列之间的间距为 40px */
  column-rule: 2px solid #ccc; /* 设置列之间的分隔线样式 */
}

/* 如果需要兼容性更好的写法，可以加上前缀 */
.container {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;

  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;

  -webkit-column-rule: 2px solid #ccc;
  -moz-column-rule: 2px solid #ccc;
  column-rule: 2px solid #ccc;
}

解释说明：

• column-count: 定义了内容应该被分成多少列。在这个例子中，内容会被分成三列。
• column-gap: 设置了列与列之间的间距。这里设置为 40px。
• column-rule: 定义了列之间的分隔线样式。这里设置了宽度为 2px 的灰色实线。

为了确保在不同浏览器中的兼容性，代码中还添加了 -webkit- 和 -moz- 前缀。