WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Multiple Columns


CSS3 Multi-section Layout

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

welookups Tutorial-Learn not only technology, but also dreams! The CSS3 Multi-section Layout tutorial (www.welookups.com) provides the most complete programming technology basic tutorial, introducing 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, a lot of online examples are provided in this site. Through the examples, you can better learn programming.


Browser Support

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

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

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 attributes

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

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


CSS3 Create Multiple Columns

The column-count attribute specifies the number of columns to be split.

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

Example

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

Gap between columns in multiple columns in CSS3

The column-gap attribute specifies the gap between columns.

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

Example

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

CSS3 Column Rules

The column-rule-style 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 »

The column-rule-width 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 yourself »

The column-rule-color 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 yourself »
The

column-rule attribute is shorthand for all column-rule- * attributes.

The following example sets the thickness, style, and color of the direct border of the column:

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 the element spans

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

Example

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

Specify the width of the column

The

column-width attribute specifies the width of the column.

Example

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