CSS3 Multiple Columns

CSS3 can design the text content as a multi-column layout like a newspaper, the following example:

TutorialFish.com ! The tutorialfish.com (www.tutorialfish.com) provides the most complete basic tutorial of programming technology, and introduces the basic knowledge of various programming languages such as HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL and so on. At the same time, this site also provides a large number of online examples, through which you can learn programming better.

Browser support

The numbers in the table represent the version number of the first browser to support the method.

The -webkit- or -moz- immediately following the number is the browser-specific prefix.

Properties
column-count	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-gap	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule-color	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-rule-style	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-rule-width	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-width	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1

CSS3 Multicolumn Properties

In this chapter we will learn the following CSS3 multi-column properties:

• column-count

• column-gap

• column-rule-style

• column-rule-width

• column-rule-color

• column-rule

• column-span

• column-width

CSS3 create multiple columns

column-countThe property specifies the number of columns to split.

The following example divides the text in a <div> element into 3 columns:

Example

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Try It! 

Gap between columns in CSS3 multiple columns

column-gapThe property specifies the gap between columns.

The following example specifies a column-to-column gap of 40 pixels:

Example

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

Try It! 

CSS3 column borders

column-rule-styleThe property specifies the border style between columns:

Example

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

 Try It! 

column-rule-widthThe property specifies the border thickness of the two columns:

Example

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

Try It! 

column-rule-colorThe property specifies the border color of the two columns:

Example

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

Try It! 

column-ruleProperties are shorthand for all properties of column-rule-*.

The following example sets the thickness, style, and color of the column's immediate border:

Example

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

Try It! 

Specifies how many columns the element spans

The following example specifies that the <h2> element spans all columns:

Example

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

Try It! 

Specifies the width of the column

column-widthThe property specifies the width of the column.

Example

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

 Try It! 

CSS3 Multicolumn Properties

The following table lists all CSS3 multicolumn properties: