There are many ways in CSS to partition a page into two or more columns.
The column-count property offers an easy way to create columns.
This property is mostly used to create columns for long text content.
An element 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>
.multiple-column {
padding: 15px;
column-count: 2;
}
</style>
<p class="multiple-column">
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.
</p>
A family of related properties is available to create and customize columns.
They are:
Each one is presented next.
The column-count property specifies the number of columns.
This property is mostly used to create columns for long text content.
Setting this value to auto
will divide the content based on the column-width.
An element divided into 3 columns.
<style>
.column-count {
column-count: 3;
}
</style>
<div class="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.
</div>
For details on column-count
, see our CSS column-count Property Reference.
The column-gap property defines the spacing between columns.
The default column gap is 1em
.
This example has a wider gap between the columns.
<style>
.column-gap {
column-count: 2;
column-gap: 50px;
}
</style>
<div class="column-gap">
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>
For details on column-gap
, see our CSS column-gap Property Reference.
The column-fill property defines how content is broken into columns.
The default value is balance
.
This example has a balance column-fill setting.
<style>
.column-fill {
column-count: 2;
column-fill: auto;
}
</style>
<div class="column-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>
For details on column-fill
, see our CSS column-fill Property Reference.
A column rule is a vertical divider line between columns.
The column-rule property is a shorthand for style, width, and color.
Using column-rule to customize the lines between the columns.
<style>
.column-rule {
column-count: 3;
column-gap: 40px;
column-rule: 4px dotted purple;
}
</style>
<div class="column-rule">
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>
For details on column-rule
, see our CSS column-rule Property Reference.
A column rule is a vertical divider line between columns.
The column-rule-style property specifies the line style of the rule.
This example has a dashed line between the columns.
<style>
.column-rule-style {
column-count: 3;
column-gap: 40px;
column-rule-style: dashed;
column-rule-width: 2px;
}
</style>
<div class="column-rule-style">
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>
The column-rule-width property specifies the width of the line.
This example has a wide line between the columns.
<style>
.column-rule-width {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: 4px;
}
</style>
<div class="column-rule-width">
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>
For details on column-width
, see our CSS column-width Property Reference.
The column-rule-width property specifies the color of the line.
This example has a colored line between the columns.
<style>
.column-rule-color {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: 4px;
column-rule-color: orangered;
}
</style>
<div class="column-rule-color">
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>
For details on column-color
, see our CSS column-color Property Reference.
The column-span property specifies how many columns an element should span.
This heading spans across all the columns in the container.
<style>
.column-span {
column-count: 3;
}
</style>
<div class="column-span">
<h3 style="column-span:all;">
The early life of Claude Monet
</h3>
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>
For details on column-span
, see our CSS column-span Property Reference.
The column-width property specifies a suggested column width.
This setting helps determine how many columns to display.
A value of auto
lets the browser decide on each column size.
An element with a specific column-width.
Resize the browser to see the number of columns change.
<style>
.column-width {
column-width: 200px;
}
</style>
<div class="column-width">
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>
For details on column width, see our CSS column-width Property Referencee.
These are the multi-column properties.
Property | Description |
---|---|
column-count | Specifies the number of columns an element should be divided into |
column-fill | Specifies how to fill columns |
column-gap | Specifies the gap between the columns |
column-rule | A shorthand property for setting all the column-rule-* properties |
column-rule-color | Specifies the color of the rule between columns |
column-rule-style | Specifies the style of the rule between columns |
column-rule-width | Specifies the width of the rule between columns |
column-span | Specifies how many columns an element should span across |
column-width | Specifies a suggested, optimal width for the columns |
columns | A shorthand property for setting column-width and column-count |
The numbers specify the browser version that first fully supported the property.
Function | |||||
---|---|---|---|---|---|
column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-fill | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-span | 50.0 | 10.0 | Not supported | 9.0 | 37.0 |
column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |