The CSS column-fill property defines how to fill columns, balanced or not.
Syntax:
column-fill: balance|auto;balance (default) – fills each column with about the same amount of content.
auto – fills each column until it reaches the height, and do this until it runs out of content.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.text1, .text2 {
column-count: 3;
height: 100px;
}
.text1 {
column-fill: auto;
}
.text2 {
column-fill: balance;
}
</style>
</head>
<body>
<h4>column-fill: auto:</h4>
<div class="text1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<h4>column-fill: balance (default):</h4>
<div class="text2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</body>
</html>Output:
column-fill: auto:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
column-fill: balance (default):
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Enjoy coding!
Read also: