The column-fill property specifies how content is filled into columns in a multi-column layout.
CSS
column-fill: value;
If the columns are not balanced, then the last columns may be empty or partially filled. If they are balanced, then the browser distributes the content among all the columns such that the height of each column is almost same. By default, columns are balanced.
Values
balance : Content is equally divided between columns, thus making the height of all the columns almost same. The column height can't be more than the container's height. This is the default value.
auto : Each column is filled until its height becomes equal to its container's height. This may result in the last columns being empty or partially filled.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Examples
In the following example, the number of columns into which the content of paragraph is to be divided is set to 3 using the column-count property and the column-fill property is set to balance (which is also the default value). This divided the entire paragraph content into the three columns equally, making the heights of all the columns nearly equal. The container element p is given a height of 740px.
Use the prefix -webkit- for browser support from Chrome, Safari and Opera, and -moz- for support from Firefox.
HTML
<p>Lorem ipsum ... lectus turpis.</p>
CSS
body {
background-color: burlywood;
}
p {
margin: 20px;
padding: 10px;
height: 740px;
text-align: justify;
background-color: white;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-fill: balance; /* Chrome, Safari, Opera */
-moz-column-fill: balance; /* Firefox */
column-fill: balance;
}
See the Pen column-fill: balance by Aakhya Singh (@aakhya) on CodePen.
The screenshot of the output is shown below for a better view.
In the above example, if the column-fill value is set to auto, then it may result in the last columns being empty or partially filled as shown in the following demo.
See the Pen column-fill: auto by Aakhya Singh (@aakhya) on CodePen.
The screenshot of the output at container height of 400px is shown below.
Note that the output will vary for different screen widths or container widths, because that leads to different column widths.
Browser Support
This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.
