CSS3 Multi-Column Layouts

Previous Page Next Page

Creating Multi-Column Layouts

CSS3 introduces the multi-column layout module, simplifying the creation of multi-column layouts akin to those found in magazines and newspapers. This feature eliminates the need for floating boxes. Below is a straightforward example demonstrating text split into three columns using CSS3's multiple column layout feature.

Example

Give it a try »

p {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3; /* Standard syntax */
}

Setting Column Count or Width

The CSS properties column-count and column-width determine the appearance and number of columns. column-count sets the column count within the multicol element, while column-width establishes the desired column width.

Example

Give it a try »

p {
-webkit-column-width: 150px; /* Chrome, Safari, Opera */
-moz-column-width: 150px; /* Firefox */
column-width: 150px; /* Standard syntax */
}

Note: The column-width property defines the preferred column width, which may vary based on available space. Avoid using this property with column-count.

Setting Column Gap

To adjust the gap between columns, utilize the column-gap property. This property maintains a consistent gap between each column. By default, the gap is set to normal, equivalent to 1em.

Example

Give it a try »

p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
/* Standard syntax */
column-count: 3;
column-gap: 100px;
}

Setting Column Rules

You can incorporate a line between columns, known as a rule, using the column-rule property. This property offers a convenient shorthand for setting the rule's width, style, and color in a single declaration. column-rule accepts values akin to border and outline properties.

Example

Try this code »

p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
-webkit-column-rule: 2px solid red;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
-moz-column-rule: 2px solid red;
/* Standard syntax */
column-count: 3;
column-gap: 100px;
column-rule: 2px solid red;
}

Note: While the width of the column rule doesn't impact the width of column boxes, if the column rule exceeds the gap width, adjacent column boxes will overlap the rule.

CSS3 Multiple Columns Properties

The below table provides a quick summary of all the multiple columns properties:

Property	Description
`column-count`	Specifies the number of columns inside a multi-column element.
`column-fill`	Specifies how content is spread across columns.
`column-gap`	Specifies the gap between the columns.
`column-rule`	Specifies a straight line or rule, to be drawn between each column.
`column-rule-color`	Specifies the color of the rule between columns.
`column-rule-style`	Specifies the style of the rule between columns.
`column-rule-width`	Specifies the width of the rule between columns.
`column-span`	Specifies how many columns an element spans across.
`column-width`	Specifies the optimal width of the columns.
`columns`	A shorthand property for setting both the `column-width` and the `column-count` properties at the same time.

Previous Page Next Page