The column-fill property defines how columns are filled with text.
One option is balance, in which column heights are equal.
Another is auto, in which columns are filled by height first.
These columns are created with column-fill set to auto.
The columns are not of equal height.
Resize the browser and see the fill adjust.
<style>
.col-fill {
height: 550px;
column-count: 3;
column-fill: auto;
}
</style>
<div class="col-fill">
Claude Monet was raised in Le Havre,
Normandy, and became interested in the
outdoors and drawing from an early age.
Although his mother, Louise-Justine
Aubrée Monet, supported his ambitions
to be a painter, his father, Claude-Adolphe,
disapproved and wanted him to pursue a
career in business. He was very close to
his mother, but she died in January 1857
when he was sixteen years old, and he was
sent to live with his childless, widowed
but wealthy aunt, Marie-Jeanne Lecadre.
He went on to study at the Académie Suisse,
and under the academic history painter
Charles Gleyre, where he was a classmate
of Auguste Renoir. His early works include
landscapes, seascapes, and portraits, but
attracted little attention. A key early
influence was Eugène Boudin who introduced
him to the concept of plein air painting.
From 1883, Monet lived in Giverny, also
in northern France, where he purchased a
house and property and began a vast
landscaping project, including a
water-lily pond.
</div>
column-fill: balance | auto | initial | inherit;
| Value | Description |
|---|---|
| balance | Default. Distibutes column equally |
| auto | Distribute column to fill container height first |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see different column-fill values.
<style>
.column-fill-example {
column-count: 3;
column-fill: balance;
height: 600px;
}
</style>
<div class="column-fill-example">
Paul Gauguin was a French Post-Impressionist
artist. Unappreciated until after his death,
Gauguin is now recognized for his experimental
use of color and Synthetist style that were
distinct from Impressionism. Toward the end
of his life, he spent ten years in French
Polynesia. The paintings from this time
depict people or landscapes from that region.
His work was influential on the French
avant-garde and many modern artists, such
as Pablo Picasso and Henri Matisse, and he
is well known for his relationship with
Vincent and Theo van Gogh. Gauguin's art
became popular after his death, partially
from the efforts of dealer Ambroise Vollard,
who organized exhibitions of his work late in
his career and assisted in organizing two
important posthumous exhibitions in Paris.
</div>
This table shows when column-fill support started for each browser.
 Chrome
|
50.0 | Apr 2016 |
 Firefox
|
52.0 | Mar 2017 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
37.0 | May 2016 |
 Safari
|
9.0 | Sep 2015 |
