Example of the column-fill property with the "balance" value:

Source Code: (back to article)

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

<style>

.balance {

column-count: 4;

column-rule: 1px solid black;

column-fill: balance;

}

</style>

</head>

<body>

<h1>Column-fill property example</h1>

This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns.

</p>

</body>

</html>