CSS column-fill属性用于指在多列布局中，每一个列的内容如何填充和分配。
使用CSS column-fill属性，你可以控制列的内容是均匀分配还是自动分配。
内容均匀分配也叫平衡模式，该模式中，浏览器（或use agent）会调整各个列的高度，使各个列的内容的高度基本一致。而自动分配模式会使内容按顺序分配在各个列中，各个列的高度可能不一样。
当多列布局中，当列的高度被明确指定的时候，column-fill属性的效果就会非常明显。
下面的图片展示了平衡模式和自动分配模式的效果：
官方语法
column-fill: auto | balance
参数：
- balance：平衡模式，各个列的内容高度基本一致。
- auto：列的内容按顺序分布，各个列中内容的高度不一定相同。
column-fill属性的初始值为auto。
应用范围
column-fill属性可以应用在所有多列布局元素上。
示例代码
下面是column-fill属性的一些取值的示例代码：
/* 关键字 */
column-fill: auto;
column-fill: balance;
column-fill: inherit;
下面是一个实际应用的示例代码：
.columns{
width: 100%;
height: 350px;
-moz-columns: 2em 3;
-webkit-columns: 2em 3;
columns: 2em 3;
-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
text-align: justify;
}
在线演示
注意，column-fill属性目前只有Firefox浏览器才支持，所以下面的演示需要在Firefox浏览器中才可以看到效果：
column-fill: balance
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行。
人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。
但是在CSS3的多列布局(columns)语法功能出现之前，人们如果想让文本呈多列显示，要么使用绝对定位，手动给文本分段落，或者使用JS脚本等，而新语法的出现，彻底改变了这样的局面。
浏览器支持
目前只有Firefox浏览器支持column-fill属性。
