WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Multiple Columns


CSS3 Multi-column Layout

The CSS3 multi-column layout allows easy definition of multiple columns of text - just like in newspapers:

Raja Ram Mohan Roy is considered as the pioneer of modern Indian Renaissance for the remarkable reforms he brought in the 18th and 19th century India. Among his efforts, the abolition of the brutal and inhuman Sati Pratha was the most prominent. His efforts were also instrumental in eradicating the purdah system and child marriage. In 1828, Ram Mohan Roy formed the Brahmo Samaj, uniting the Bhramos in Calcutta, a group of people, who had no faith in idol-worship and were against the caste restrictions. The title 'Raja' was bestowed upon him by the Mughal emperor Akbar II, in 1831. Roy visited England as an ambassador of the Mughal King to ensure that Bentick's regulation banning the practice of Sati was not overturned. He died of meningitis in 1833 while residing in Bristol, England.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

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

CSS3 Multi-column Properties

In this chapter you will learn about the following multi-column properties:

  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width
  • column-count
  • column-gap
  • column-rule-style

CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into.

The following example will divide 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 »

CSS3 Specify the Gap Between Columns

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

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

Example

div {
    -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
    -moz-column-gap: 50px; /* Firefox */
    column-gap: 50px;
}
Try it yourself »

CSS3 Column Rules

The column-rule-style property specifies the style of the rule 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 »

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

Example

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

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

Example

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

The column-rule property is a shorthand property for setting all the column-rule-* properties above.

The following example sets the width, style, and color of the rule 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 Should Span

The column-span property specifies how many columns an element should span across.

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;
}
Try it yourself »

Specify The Column Width

The column-width property specifies a suggested, optimal width for the columns.

The following example specifies that the suggested, optimal width for the columns should be 100px:

Example

div {
    -webkit-column-width: 120px; /* Chrome, Safari, Opera */
    column-width: 120px;
}
Try it yourself »