在 CSS3 中，我们可以使用 columnFill 属性来控制多列布局中如何填充空白区域。这个属性可以帮助我们更好地控制多列布局的外观，让我们的页面看起来更加美观和专业。
columnFill 属性的取值
columnFill 属性有两个取值：
- balance：默认值。列的高度会尽量保持平衡，让整个多列布局看起来更加均衡。
- auto：列的高度会根据内容的高度自动调整，不一定会保持平衡。
如何使用 columnFill 属性
要使用 columnFill 属性，我们需要先创建一个多列布局的容器，并设置相应的样式。
.column-container {
column-count: 3; /* 设置列数为3 */
column-fill: balance; /* 设置列的填充方式为平衡 */
}在上面的示例中，我们创建了一个包含3列的多列布局容器，并设置了 column-fill 属性为 balance，这样就可以让列的高度尽量保持平衡。
如果我们想要使用 auto 模式：
.column-container {
column-count: 3; /* 设置列数为3 */
column-fill: auto; /* 设置列的填充方式为自动 */
}示例代码
下面是一个简单的示例代码，演示了如何使用 columnFill 属性来创建一个多列布局：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------------- --------------
-------
----------------- -
------------- --
------------ --------
-
------------ -
-------------- -----
-
--------
-------
------
---- -------------------------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
------
-------
-------在上面的示例中，我们创建了一个包含3列的多列布局容器，并设置了 column-fill 属性为 balance。每个列的内容都是一个简单的 div 元素，通过设置 margin-bottom 来调整列与列之间的间距。
结语
通过使用 columnFill 属性，我们可以更加灵活地控制多列布局的外观，让页面呈现出更加美观和专业的效果。希望本文对你有所帮助！