CSS3 multiple columns


May 04, 2021 04:00 CSS3


Table of contents


CSS3 multiple columns


CSS3 multiple columns

With CSS3, you can create multiple columns to lay out text - just like newspapers, you can collect articles and take a look when you need them.

In this chapter, you'll learn about the following multi-column properties:

  • column-count

  • column-gap

  • column-rule

  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-width

Browser support

The numbers in the table support the version number of the first browser for this method.

Immediately after the number - webkit - or -moz - 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 creates multiple columns

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

CSS3 multiple columns CSS3 multiple columns CSS3 multiple columns CSS3 multiple columns CSS3 multiple columns

Text of div elements divided into three columns:

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

Try it out . . .



The gap between the specified columns of CSS3

The gap between the columns specified by the column-gap property:

CSS3 multiple columns CSS3 multiple columns CSS3 multiple columns CSS3 multiple columns CSS3 multiple columns

Specify the 40 pixel gap between columns:

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

Try it out . . .



CSS3 column rules

The column-rule property sets the width, style, and color between columns.

CSS3 multiple columns CSS3 multiple columns CSS3 multiple columns CSS3 multiple columns CSS3 multiple columns

Rules that specify the width, style, and color between columns:

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

Try it out . . .



CSS3 new multi-column properties

The following table lists the new multi-column properties for all CSS3s, and click on the properties to see more and how to use them:

Property Description Css
column-count Specifies the number of columns an element should be divided into 3
column-fill Specify how the columns are populated 3
column-gap Specify the gap between columns 3
column-rule A short-case property for setting all column rules 3
column-rule-color Color rules between specified columns 3
column-rule-style The style rule between the specified columns 3
column-rule-width The width rule between the specified columns 3
column-span Specify how many columns an element should span 3
column-width Specifies the width of the column 3
columns The abbreviated property sets the column width and the number of columns 3