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
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;}
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:
How to Control Column Element Breaks
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;}
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:
How to Create and Style Vertical Line Between Columns
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;}
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;}
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;}
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:
How to Setup Spacing Between Two Columns
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:
Read Next:How to Make Gradient Image Using CSS