It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Master Creating Multiple CSS Columns

Reading time 4 min
Published Dec 2, 2016
Updated Oct 2, 2019

TL;DR — The CSS columns refer to the creation of a flexible column layout for your web page. It is also possible to specify the number of columns and the CSS column width.

Creating column layouts

The CSS columns shorthand property is for defining the number of columns and their width in one declaration. The column-width and column-count can be declared separately as well.

The example below divides the text content to four separate columns by using the column-count longhand property:

Example
.col {
    column-count: 4;  
}

The following example uses the CSS columns shorthand to set both properties in one declaration. We set the CSS 3 column layout and another with four columns:

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 following code example creates one CSS two column layout:

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

Note: -webkit- is for making sure that columns in CSS are presented correctly in Opera, Chrome, and Safari. -moz- guarantees that Firefox presents them properly.

Space between columns

The column-gap property creates space between columns. You can describe its value by using regular length indicators (pt, px, cm, etc.) or normal keyword (1 em gap).

The CSS example below shows how to apply a 55 pixels distance in-between the columns:

Example
.col {
    column-gap: 55px;  
}

Note: gaps in columns in CSS push the column content to make space.

Vertical lines between columns

column-rule is a shorthand property for adding vertical dividers between the columns. It defines column-rule-stylecolumn-rule-width, and column-rule-color in one declaration:

Example
.col {
    column-rule: 2px solid blue;  
}
  • column-rule-style: sets the style of the line (solid, dotted, dashed, etc.).
  • column-rule-width: sets the thickness of the line (keyword such as thin or length indicators like 9px).
  • column-rule-color: sets the color of the line.

In the example below, the style is set to solid:

Example
.col {
    column-rule-style: solid;
}

The next example sets the width of the rule to 2px:

Example
.col {
    column-rule-width: 2px;
}

The following example creates blue CSS column dividers:

Example
.col {
    column-rule-color: blue;  
}

Note: dividers of CSS columns do not take space. Therefore, the content won't be pushed.

Spanning elements in columns

It is possible to make elements span across the columns. The column-span has two values:

  • all: elements expand across the columns.
  • none: set when it is necessary to prevent elements from spanning.

The following example sets the <h1> as the spanning element:

Example
h1 {  	     	
    column-span: all;  
}

Setting column width

The CSS column-width sets a unique width for all columns. Browsers then determine how many columns can fit in the specified width.

If the CSS column width is too small to fit at least two columns, the content is presented in one column.

This example determines that the suggested width of the columns is 150px:

Example
.col {  	     	
    column-width: 250px;  
}

Setting how content fills columns

The column-fill is for arranging and balancing the content in columns. It accepts two values:

  • balance: every column has the same amount of content (cannot get taller than specified height).
  • auto: arranges content into the columns until it reaches height. This action is done until content ends.

Note: the column-fill has a poor browser support and currently works only in Firefox.

Full list of properties for columns

This table will quickly introduce you to styling properties for columns that CSS has to offer:

Property Description
column-count Determines the number of columns the text should be split into
column-fill Determines how the text should fill the columns
column-gap Determines spacing between columns
column-rule A shorthand property for all three column rule properties
column-rule-color Determines the horizontal divider's color
column-rule-style Determines the horizontal divider's style
column-rule-width Determines the horizontal divider's width
column-span Determines if the text should span between multiple columns
column-width Determines the width of the columns
columns A shorthand property for column-width and column-count