It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Properties for the CSS Columns

Reading time 4 min
Published Aug 8, 2017
Updated Oct 15, 2019

Working with CSS columns

CSS columns is a shorthand for both column-width and column-count properties:

Example
.news1 {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
}

.news2 {
    -webkit-columns: 50px 4; /* Chrome, Safari, Opera */
    -moz-columns: 50px 4; /* Firefox */
    columns: 50px 4;
}

The syntax for this property is rather intuitive:

columns: width count;

We will explain both column-width and column-count properties in the following sections.

Defining column width in CSS

To specify the optimal CSS column width, use the column-width property:

Example
div {
    -webkit-column-width: 200px; /* Opera, Chrome, Safari */
    -moz-column-width: 200px; /* Firefox */
    column-width: 200px;
}

The syntax is simple, as you only need to define one value:

column-width: value;

You can either use the default value auto which will simply divide the content into the number of columns specified by column-count equally, or define the width in any CSS unit (e.g., px or ems).

Setting column count

By using the CSS column-count property, you can specify the number of columns an element should be divided into:

Example
div {
    -webkit-column-count: 2; /* Opera, Chrome, Safari */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

Just like column-width, column-count only takes one value:

column-count: value;

The default value for CSS column-count is auto, which lets column-width define the number of columns. The browser will divide the window into columns of specified width.

If you need an exact number of columns, define one in a unitless number.

Manipulating the CSS column rule

Just like columns, the column-rule property is actually a shorthand for three subproperties:

  • column-rule-width
  • column-rule-style
  • column-rule-color
Example
div {
    -webkit-column-rule: 10px outset green; /* Opera, Chrome, Safari */
    -moz-column-rule: 10px outset green; /* Firefox */
    column-rule: 10px outset green;  	
}

The CSS column rule is a kind of border that separates CSS columns from one another.
Using this shorthand, you can define three values for it:

column-rule: width style color;

In the following sections, we will explain each subproperty in more detail.

The width of the column rule

The CSS column-rule-width property is used to specify the width of rule between columns:

Example
div {
    -webkit-column-rule-width: 5px; /* Opera,Chrome, Safari */
    -moz-column-rule-width: 5px; /* Firefox */
    column-rule-width: 5px;
}

The syntax only requires you to define one value:

column-rule-width: value;

Value Description
Keywords The width defined as thin, medium, or thick
Length The width in CSS length units

The column rule style

To style the column rule, use the CSS column-rule-style property:

Example
div {
    -webkit-column-rule-style: dashed; /* Opera, Chrome, Safari */
    -moz-column-rule-style: dashed; /* Firefox */
    column-rule-style: dashed;
}

You only need to define one value for this property:

column-rule-style: value;

All the available values are listed in the table below:

Value Description
none The default value. No border is displayed
hidden No border is displayed
dotted A border of round dots is displayed
dashed A border of short dashes is displayed
solid A single solid border is displayed
double A double border is displayed
groove An inward-curving border is displayed
ridge An outward-curving border is displayed
inset An embedded border is displayed
outset An embossed border is displayed

Coloring the column rule

The CSS column-rule-color property is used to color the rule between columns:

Example
div {
    -webkit-column-rule-color: green; /* Opera, Chrome, Safari */
    -moz-column-rule-color: green; /* Firefox */
    column-rule-color: green;
}

The syntax goes as follows:

column-rule-color: value;

You can specify the color in color names, RGB, RGBA, HEX, HSL or HSLA values.

Tip: to get the value for the exact color tone you need, use the Pickeristic color picker.

Defining the column gap in CSS

The CSS column-gap property is used to specify the column gap in CSS:

Example
div {
    -webkit-column-gap: 50px; /* Opera, Chrome, Safari */
    -moz-column-gap: 50px; /* Firefox */
    column-gap: 50px;
}

You can define the gap either by using the keyword normal or specifying an exact length:

column-gap: value;

The default value is normal which equals to 1em. To specify a custom width for the column gap, use any CSS length unit (e.g., pixels or ems).

The CSS column span

The CSS column-span property specifies how many columns an element should span across:

Example
h1 {
    -webkit-column-span: all; /* Opera, Chrome, Safari */
    column-span: all;
}

There are two keywords you can use as values to define the CSS column span:

column-span: none; / column-span: all;

The default value is none, which means the element stays in one column and does not span across multiple columns. To make the element span across all the columns in the table, use all.

Browser support

Browser image
Chrome
50+
Browser image
Edge
12+
Browser image
Firefox
52+
Browser image
IE
10+
Browser image
Opera
11.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
50+
Browser image
Firefox
52+
Browser image
Opera
11.1+
Browser image
Safari
9+