CSS3 Multi-column

CSS3 allows you to design text content into a multi-column layout similar to newspapers, as shown in the following example:

tutorialpro.org - Learning is not just about technology, it's about dreams! tutorialpro.org (www.tutorialpro.org) offers the most comprehensive basic tutorials on programming technologies, introducing the basics of HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL, and other programming languages. Additionally, this site provides a large number of online examples, through which you can better learn programming.

Browser Support

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

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

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

Creating Multi-columns with CSS3

The column-count property specifies the number of columns needed.

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

Gap Between Columns in CSS3 Multi-columns

The column-gap property specifies the gap between the columns.

The following example specifies a 40-pixel gap between the columns:

Example

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

Column Borders in CSS3

The column-rule-style property specifies the style of the border between columns:

Example

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

The column-rule-width property specifies the thickness of the border between columns:

Example

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

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

Example

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

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

The column-rule property is a shorthand for all 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;
}

Specify How Many Columns an Element Should Span

The following example specifies that the <h2> element should span across all columns:

Example

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

Specify the Width of the Columns

The column-width property specifies the width of the columns.

Example

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

CSS3 Multi-column Properties

The following table lists all the CSS3 multi-column properties:

```