CSS column-fill Property

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.

Example

#

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.

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

Syntax

column-fill: balance | auto | initial | inherit;

Values

#

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.

More Examples

Click the buttons to see different column-fill values.

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

Browser support

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

You may also like

Guides