Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

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.