CSS3 column-fill 属性

column-fill 属性用于指定如何分配内容到多列中。在多列布局中，当内容不足以填满所有列时，column-fill 属性可以控制列之间的内容如何填充。

语法

column-fill: auto | balance;

• auto：默认值，浏览器将尽量使每一列的高度相等，以便填充内容。
• balance：浏览器将尽量使每一列的高度相等，并根据内容的多少来动态调整列的高度，以便填充内容。

示例

/* 使用 column-fill 属性 */
.columned {
  column-count: 3;
  column-fill: balance;
}

<div class="columned">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

在上面的示例中，我们将一个段落放置在一个具有三列的容器中，并使用 column-fill: balance; 来指定列的填充方式。浏览器会根据内容的多少自动调整列的高度，以便填充整个容器。

这样，无论内容多少，多列布局都能够保持均衡填充，提供更好的视觉效果。