什么是 CSS 列以及如何填充它？

CSS 列是什么？

CSS 列是指一组元素在一个容器中按列排列显示，类似于瀑布流布局。CSS3 引入了多列布局，它可以帮助我们更加简便地实现该效果。

如何填充 CSS 列？

1. 设置列数

首先，我们需要设置我们的列数。在 CSS3 中，可以通过 column-count 属性来设置要显示的列数，示例如下：

.container {
  column-count: 3;
}

2. 设置列间距

接下来，我们可以设置列之间的间距。在 CSS3 中，可以通过 column-gap 属性来设置列之间的距离，示例如下：

.container {
  column-count: 3;
  column-gap: 20px;
}

3. 设置自动填充

在上述代码中，如果我们的容器中的元素数量不足以填充所有列，那么就会出现某一列空着的情况。这时，我们可以设置自动填充。

在 CSS3 中，可以通过 column-fill 属性来设置如何填充列，示例如下：

.container {
  column-count: 3;
  column-gap: 20px;
  column-fill: auto;
}

其中，auto 表示自动填充，即优先填满前面的列再填满后面的列。

4. 调整元素大小

最后，我们还需要调整元素的大小，以适应列的宽度。在 CSS3 中，可以通过 break-inside 属性来设置元素在列中的显示方式，示例如下：

.container div {
  break-inside: avoid;
}

其中，avoid 表示不要将元素拆分为多个部分，在列之间断开，从而实现适应列宽的效果。

总结

通过设置列数、列间距、自动填充和元素大小等属性，我们可以轻松实现 CSS 列布局。但需要注意的是，在使用 CSS 列布局时，需要考虑到不同浏览器的兼容性问题。