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.

Properties1644326910355028259.png1644326918810010765.png1644326922045024751.png1644326924998054748.png1644326928197037966.png
column-count4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1
column-gap4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1
column-rule4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1
column-rule-color4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit
11.1
column-rule-style4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit
11.1
column-rule-width4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit
11.1
column-width4.0 -webkit-10.02.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:

PropertyDescription
column-countSpecifies the number of columns by which elements should be split.
column-fillspecify how to populate the column
column-gapSpecify the gap between columns
column-ruleShorthand for all column-rule-* properties
column-rule-colorSpecifies the color of the border between two columns
column-rule-styleSpecifies the style of the border between two columns
column-rule-widthSpecifies the thickness of the border between two columns
column-spanSpecifies how many columns the element should span
column-widthSpecifies the width of the column
columnsShorthand properties for column-width and column-count.