Properties for the CSS Columns

Working with CSS columns

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

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

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:

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

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:

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;

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

The column rule style

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

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:

Coloring the column rule

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

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:

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:

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

Chrome

50+

Edge

12+

Firefox

52+

IE

10+

Opera

11.1+

Safari

9+

Mobile browser support

Chrome

50+

Firefox

52+

Opera

11.1+

Safari

9+