Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS Multiple Columns

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.

Example

#

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>

Creating columns

#

A family of related properties is available to create and customize columns.

They are:

  • column-count -- Specifies the number of columns
  • column-gap -- Specifies the space between the columns
  • column-fill -- Specifies how to fill columns
  • column-rule -- A shorthand for setting all column-rule-* values
  • 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 for setting column-width and column-count

Each one is presented next.


The column-count property

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.

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

The column-gap property defines the spacing between columns.

The default column gap is 1em.

This example has a wider gap between the 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.
<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

The column-fill property defines how content is broken into columns.

The default value is balance.

This example has a balance column-fill setting.

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


The column-rule property

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.

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


The column-rule-style property

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.

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

The column-rule-width property specifies the width of the line.

This example has a wide line between the 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.
<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-color property

The column-rule-width property specifies the color of the line.

This example has a colored line between the 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.
<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.


Column Span

The column-span property specifies how many columns an element should span.

This heading spans across all the columns in the container.

The early life of Claude Monet

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


Column Width

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.

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


Multi-column Properties

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

Browser Support

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

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides