Master Creating Multiple CSS Columns

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:

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

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

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:

.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-style, column-rule-width, and column-rule-color in one declaration:

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

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

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

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

The following example creates blue CSS column dividers:

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

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

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

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:

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:

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