Categories
CSS Web development

CSS column-fill Property

CSS column-fill Property

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!