How To Make 2-Columns Or 3-Columns Using CSS

If you want to make 2-Columns, 3-Columns or more then 3-Columns in a HTML document, it is possible using a CSS property columns which can be used to create and give style to columns. The columns property is a shorthand definition of the number of columns and their widths in a multi-column text flow. It has two values column-count and width, where column-count is a positive integer for the number of columns to flow the text into and width is a positive CSS length defining the width of each column. In this post I am describing the uses of different styles of columns using different column properties in CSS. Here are syntax and examples for creating columns in a HTML document with column property.

Syntax: columns: column-count width

Table of Contents

Examples:

.two-column {columns:2 150px; -webkit-columns:2 150px;}
.three-column {columns:3 15em;-webkit-columns:3 15em;}

How to Create Columns and Setup Their Width

There is a property column-count, which defines the number of columns to create in a multi-column text flow.

Syntax: column-count: integer | auto

Examples:

.two-column {-moz-column-count:2; -webkit-column-count:2; column-count:2;}
.three-column {-moz-column-count:3; -webkit-column-count:3; column-count:3;}

There is another property column-width, which defines the width of each column in a multi-column text flow. It has two values length and auto, where length is a positive value for width between columns in any valid CSS measurement.

Syntax: column-width: length | auto

Examples:

.two-column {-moz-column-count:2; -webkit-column-count:2; column-count:2;-moz-column-width:300px; -webkit-column-width:300px; column-width:300px; }
.three-column {-moz-column-count:3; -webkit-column-count:3; column-count:3;-moz-column-width:200px; -webkit-column-width:200px; column-width:200px;}

Demo:

See the Pen How to Create Columns and Setup Their Width by Shuseel Baral (@shuseel) on CodePen.

How to Control Column Element Breaks

There are two properties column-break-after and column-break-before, to control column elements breaks before and after an associated element. column-break-after property can control column break after the associated element when the following multi-column text.

This property has three values which are always, auto and avoid where value always should force a column break after the associated element, avoid attempts to avoid a column break after the element and the default value auto neither forces nor forbids a column break, allowing the user agent to decide how to break the content during flow. Here are the syntax and examples of this property.

Syntax: column-break-after: always | auto | avoid

Examples:

.breakitafter {-webkit-column-break-after:always; -moz-column-break-after:always; -ms-column-break-after:always; -o-column-break-after:always; column-break-after:always;}

The another property column-break-before is used to control column element breaks before the associated element when flowing multi-column text. This property has also three values which are always, auto and avoid where value always should force a column break before the associated element, avoid attempts to avoid a column break before the element and the default value auto neither forces nor forbids a column break, allowing the user agent to decide how to break the content during flow. Here are the syntax and examples of this property.

Syntax: column-break-before: always | auto | avoid

Examples:

.breakitbefore {-webkit-column-break-before:always; -moz-column-break-before:always; -ms-column-break-before:always; -o-column-break-before:always; column-break-before:always;}

Demo:

See the Pen How to Control Column Element Breaks by Shuseel Baral (@shuseel) on CodePen.

How to Create and Style Vertical Line Between Columns

We can create and style vertical line between columns using some properties which are column-rule, column-rule-color, column-rule-style and column-rule-width. column-rule is shorthand property which defines the style, width, and color of the rule divider between columns in a multi-column text flow. Here are the syntax and examples of this property.

Syntax: column-rule: rule-width rule-style color

Examples:

.two-column {-moz-column-count:2; -webkit-column-count:2; column-count:2;-moz-column-rule:4px solid green; -webkit-column-rule:4px solid green; column-rule:4px solid green;}
.three-column {-moz-column-count:3; -webkit-column-count:3; column-count:3;-moz-column-rule:4px dashed red; -webkit-column-rule:4px dashed red; column-rule:4px dashed red;}

There is another separate property column-rule-style to set rule width only which defines the width of any rules between columns in a multi-column text flow.

Syntax: column-rule-style: dashed | dotted | double | groove | hidden | inset | inherit | none | outset | ridge | solid

Examples:

.two-column {-moz-column-count:2; -webkit-column-count:2; column-count:2;-moz-column-rule-style:solid; -webkit-column-rule-style:solid; column-rule-style:solid;}
.three-column {-moz-column-count:3; -webkit-column-count:3; column-count:3;-moz-column-rule-style:dashed; -webkit-column-rule-style:dashed; column-rule-style:dashed;}

There is another separate property column-rule-color to set rule color only which defines the color of any rules between columns in a multi-column text flow.

Syntax: column-rule-color: color

Examples:

.two-column {-moz-column-count:2; -webkit-column-count:2; column-count:2;-moz-column-rule-style:solid; -webkit-column-rule-style:solid; column-rule-style:solid;-moz-column-rule-color:brown; -webkit-column-rule-color:brown; column-rule-color:brown;}
.three-column {-moz-column-count:3; -webkit-column-count:3; column-count:3;-moz-column-rule-style:dashed; -webkit-column-rule-style:dashed; column-rule-style:dashed;-moz-column-rule-color:blue; -webkit-column-rule-color:blue; column-rule-color:blue;}

The last property of column rule property is column-rule-width, which defines the width of a rule between columns in a multi-column text flow. Values used in this property are valid non-negative length, medium, thick, thin and inherit, where default value is medium.

Syntax: column-rule-width: non-negative length | medium | thick | thin | inherit

Examples:

.two-column {-moz-column-count:2; -webkit-column-count:2; column-count:2;-moz-column-rule-style:solid; -webkit-column-rule-style:solid; column-rule-style:solid;-moz-column-rule-width:20px; -webkit-column-rule-width:20px; column-rule-width:20px;}
.three-column {-moz-column-count:3; -webkit-column-count:3; column-count:3;-moz-column-rule-style:dashed; -webkit-column-rule-style:dashed; column-rule-style:dashed;-moz-column-rule-width:thick; -webkit-column-rule-width:thick; column-rule-width:thick;}

Demo:

See the Pen How to Create and Style Vertical Line Between Columns by Shuseel Baral (@shuseel) on CodePen.

How to Setup Spacing Between Two Columns

You can specify the gap between two columns with column-gap property which defines the gap between columns in a multi-column text flow.

Syntax: column-gap: length | normal

Examples:

.two-column {-moz-column-count:2; -webkit-column-count:2; column-count:2;-moz-column-gap:90px; -webkit-column-gap:90px; column-gap:90px;}
.three-column {-moz-column-count:3; -webkit-column-count:3; column-count:3;-moz-column-gap:15em; -webkit-column-gap:15em; column-gap:15em;}