<!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>