CSS column-count Property

The column-count property partitions an element into columns.

This property is used to create columns for long text content.

Examples include articles, news, blogs, essays, and more.

Example

#

Long text divided into 2 columns with column-count.

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>
  .columns {
    column-count: 2;
  }
</style>

<div class="columns">
  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-count: number | auto | initial | inherit;

Values

#

Value Description
number Number of columns to create
auto Default. Column count is determined by column-width and others
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-count values.

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>
  .article {
    column-count: 3;
  }
</style>

<div class="article">
  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>

Browser support

This table shows when column-count 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