CSS3-多列

CSS3引入了多列布局，可以轻松地将内容分成多列，并控制列的外观和行为。

基础语法

要将内容分成多个列，我们可以将以下CSS属性应用于父元素：

column-count: 3; /* 列的数量 */
column-width: 300px; /* 列的宽度 */

例如，下面的CSS将把.content元素分成3个等宽的列：

.content {
  column-count: 3;
  column-width: 300px;
}

列间距

默认情况下，列之间没有间距。我们可以使用column-gap属性来添加间距。例如，下面的CSS将在每个列之间添加10像素的间距：

.content {
  column-count: 3;
  column-width: 300px;
  column-gap: 10px;
}

自适应列宽

如果我们使用column-width属性而不是column-count属性，则浏览器将自动计算列的数量。例如，下面的CSS将根据容器的大小自动调整列的数量和宽度：

.content {
  column-width: 300px;
}

列的外观

我们可以使用CSS属性来控制列的外观，例如，使用column-rule属性来添加列的边框，使用column-fill属性来控制如何填充最后一列以及使用break-before / break-after属性来控制在哪个元素处插入分栏符。

.content {
  column-count: 3;
  column-width: 300px;
  column-rule: 1px solid black;
  column-fill: auto;
  break-before: always;
}

兼容性

虽然多列布局非常实用，但它对旧浏览器的支持并不完善。有些浏览器可能只支持column-count或column-width属性中的一个。因此，在使用多列布局时，一定要进行良好的测试和兼容性处理。