CSS3 Multi-column

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

Example - What you learn is not only technology, but also dreams!Example(www.example.com)provides最全ofProgramming TechnologyBasicsTutorial, IntroductionalreadyHTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQLwaitVariousProgramming languageofBasics知know。 at the same timebookstationMediumalsoprovideslarge amountofOnline Examples，ThroughExample, you can更OKof学习editCourse。

Browser Support

The numbers in the table indicate the version number of the first browser that supports this method.

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

Property
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 Multi-column Properties

In this section, 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 Creating Multiple Columns

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

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

Example

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

Try it Yourself »

The gap between columns in CSS3 multi-columns.

column-gapThe property specifies the gap between columns.

The following example specifies the gap between columns as 40 pixels:

Example

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

Try it Yourself »

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 Yourself »

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

Example

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

Try it Yourself »

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

Example

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

Try it Yourself »

column-ruleThe property is a shorthand for all the column-rule-* properties.

The following example sets the thickness, style, and color of the border between columns:

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 Yourself »

Specify how many columns an 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 Yourself »

Specify Column Width

column-widthThe property specifies the width of the columns.

Example

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

Try it Yourself »

CSS3 Multi-column Properties

The following table lists all CSS3 multi-column properties:

Property Description
column-count Specifies the number of columns the element should be divided into.
column-fill Specify How to Fill Columns
column-gap Specifies the gap between columns.
column-rule Shorthand for all column-rule-* properties
column-rule-color Specifies the color of the border between two columns.
column-rule-style Specifies the style of the border between two columns.
column-rule-width Specifies the thickness of the border between two columns.
column-span Specifies how many columns the element should span.
column-width Specify Column Width
columns Shorthand property for column-width and column-count.
other extensions