CSS column-fill property
CSS column-fill property is used to control how the contents of an element are balanced when they are broken into columns. This property is specified as one of the keyword values. The initial value of this property is balance so that the content will be balanced across the columns.
Syntax for the column-fill Property:
Following is the syntax for the column-fill property.
auto | balance | balance-all
CSS column-fill property values:
Let's see what values this property can have and what do those values do:
| Values |
Description |
| auto |
In this case, the columns get filled in a sequential way. Content covers up the room only as much as it needs. |
| balance |
In this case, the content is divided equally between columns. But only the last fragment is balanced. |
| balance-all |
In this case, the content is divided equally between columns. All fragments are balanced. |
Example: CSS column-fill property
Here in the example below, we are using the column-fill property with different border colors, border styles, and different values. In this case, we have given the column-fill of the container and text as auto and balance.
<!DOCTYPE html>
<html>
<head>
<title>The column-fill property in CSS</title>
<style type="text/css">
p {
height: 7em;
background: #f99;
columns: 3;
column-rule: 1px solid;
}
p.fill-auto {
column-fill: auto;
}
p.fill-balance {
column-fill: balance;
}
</style>
</head>
<body>
<p class="fill-auto">This paragraph fills columns one at a time. Since all of the text can fit in the first column, the others are empty.</p>
<p class="fill-balance">This paragraph attempts to balance the amount of content in each column.</p>
</body>
</html>
Output:
Example 2: CSS column-fill property
Here in the example below, we are using the column-fill property with different border colors, border styles, and different values. In this case, we have given the column-fill of the container and text as 'balance-fill' and balance-all. The CSS styling is done inside the opening and closing head tags of the HTML
<!DOCTYPE html>
<html>
<head>
<title>The column-fill property in CSS</title>
<style type="text/css">
p {
height: 7em;
background: #999;
columns: 3;
column-rule: 1px solid;
}
p.fill-auto {
column-fill: balance-all;
}
p.fill-balance {
column-fill: balance-fill;
}
</style>
</head>
<body>
<p class="fill-auto">This paragraph fills columns one at a time. Since all of the text can fit in the first column, the others are empty.</p>
<p class="fill-balance">This paragraph attempts to balance the amount of content in each column.</p>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
50 |
50 |
| Edge |
12 |
12 |
| Firefox |
52 |
52 |
| Internet Explorer |
10 |
10 |
| Opera |
37 |
37 |
| Safari |
9 |
9 |
| Webview Android |
50 |
50 |
| Chrome Android |
50 |
50 |
| Firefox Android |
52 |
52 |
| Opera Android |
37 |
37 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
5.0 |
5.0 |
Conclusion
The initial value for the column-fill property is balance. This property is applicable to multicolor elements. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
