<!DOCTYPE html>

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

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