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.
Long text divided into 2 columns with column-count.
<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>
column-count: number | auto | initial | inherit;
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. |
Click the buttons to see different column-count
values.
<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>
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 |