InfoTechSite | Your Ultimate Source for IT Tutorials, MCQs, and Quizzes

Latest Posts
InfoTechSite
Web Designing Tutorials

How to Make 2-Columns or 3-Columns Using CSS

Pinterest LinkedIn Tumblr Reddit WhatsApp
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

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;}

Demo:

See the Pen How to Setup Spacing Between Two Columns by Shuseel Baral (@shuseel) on CodePen.

Read Next:How to Make Gradient Image Using CSS

Author

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 12 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Related Posts

APBCT

Write A Comment

Protected by Security by CleanTalk and CleanTalk Anti-Spam