Multi-column layout

Internet Explorer 10, as well as Windows Store apps using JavaScript in Windows 8, introduces support for the CSS Multi-column Layout Module. As of this writing, the Multi-column Layout Module is a World Wide Web Consortium (W3C) Candidate Recommendation. Multi-column layout enables content to be flowed into multiple columns, which retain a gap and an optional rule between them. It also makes it possible to vary the number of columns based on the size of the browser window.

A multi-column element is defined by the W3C as an element whose column-width or column-count property is not set to "auto" and therefore acts as a container for multi-column layout. Multi-column layout introduces the column box, which is defined as a new type of container between the content box and the content. Column boxes contain rows, which are ordered in the direction of the multi-column element. Every column box has a column height and a column width. Adjacent column boxes are separated by a column gap, which can optionally contain a column rule.

Specifying column width and count

You must, at the very least, specify a width for columns within a multi-column element. Internet Explorer 10 will display as many columns as it can, no smaller in width than the value you specify, in the browser window. To specify column width, use the following property:

PropertyDescription

column-width

Specifies the optimal width of the columns in a multi-column element.

The possible values for the property are as follows:

auto

Indicates that the optimal column width is determined by the other property values of the multi-column element, such as the column-count property. This is the default value.

<length>

A relative or absolute length value, as specified in CSS Values and Units Reference.

 

For instance, the following selector has added the column-width property and set it to 200 pixels. This means Internet Explorer 10 will fill the browser window with as many columns that have a width of 200 pixels or more.


<style type="text/css">
#multicol1 {
  column-width: 200px;
}
</style>


You can view this selector applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed Cascading Style Sheets, Level 3 (CSS3) multi-column properties is required for this page to render correctly.)

You can also specify how many columns a multi-column element should have. To specify column count, use the following property:

PropertyDescription

column-count

Specifies the optimal number of columns in a multi-column element.

The possible values for the property are:

auto

Indicates that the number of columns is determined by the values of other property values of the multi-column element, such as the column-width property. This is the default value.

<integer>

Specifies the number of columns.

 

For instance, the following selector has added the column-count property and set it to "2". This means that Internet Explorer 10 will fill the browser window with exactly two columns.


<style type="text/css">
#multicol1 {
  column-count: 2;
}
</style>


You can view this selector applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)

Column width and count can also be expressed by using the following shorthand property:

PropertyDescription

columns

A shorthand value that specifies values for the column-width and column-count properties of a multi-column element.

 

The syntax for this property is as follows:

columns: <column-width> <column-count>;

The following syntax is also valid:

columns: <column-count> <column-width>;

If only an integer is specified, column-width is set to auto and column-count is set to the integer. If only a length value is specified, column-width is set to the length value and column-count is set to auto. If only auto is specified, both column-width and column-count are set to auto

For instance, the following selector has added the columns property and has set it equal to "auto 12em". This means that the multi-column element will have a column-width of 12 ems and a column-count of auto.


<style type="text/css">
#multicol3 {
  columns: auto 12em;
}
</style>


You can view this selector applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)

Specifying column gaps and rules

Column gaps and column rules are placed between the columns of a multi-column element, along its entire length. Column gaps create space between columns to facilitate reading. A column rule is drawn in the middle of a column gap, and is only drawn between columns that both have content.

The following properties specify column gaps and rules:

PropertyDescription

column-gap

Specifies the width of the gap between columns in a multi-column element.

The possible values for this property are:

normal

The default width of 1 em.

<length>

A relative or absolute length value, as specified in CSS Values and Units Reference.

column-rule-color

Specifies the color for all column rules in a multi-column element. This property can be set to any supported color value.

column-rule-style

Specifies the style for all column rules in a multi-column element. This property accepts the same values as the border-style property.

column-rule-width

Specifies the width of all column rules in a multi-column element. This property accepts the same values as the border-width property.

column-rule

A shorthand value that specifies values for the column-rule-width, column-rule-style, and column-rule-color properties of a multi-column element.

The syntax for this property is as follows:

column-rule: <column-rule-width> <column-rule-style> <column-rule-color>;

 

Following is an example of several of these properties within a selector:


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1em;
  column-rule-style: solid;
  column-rule-color: black;
}
</style>


In this case, both the column gap and the column rule have been specified as 1 em in width. The column rule is solid black. You can view this selector applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)

Be aware that the previous example could also be expressed as follows, using the column-rule shorthand property:


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule: 1em solid black;
}
</style>


Specifying column breaks

You can specify when content should break between columns. This prevents content from breaking in the middle of paragraphs, sections, and so on. The concept of column breaks is similar to page-breaks when printing, and in fact can be controlled by Cascading Style Sheets (CSS) in much the same way.

The following properties control column breaks:

PropertyDescription

break-before

Specifies the column-break behavior that precedes a content block in a multi-column element.

This property accepts the same values as the page-break-before property, plus the following values:

page

Always force a page break before the generated box.

column

Always force a column break before the generated box.

avoid-page

Avoid a page break before the generated box.

avoid-column

Avoid a column break before the generated box.

break-after

Specifies the column-break behavior that follows a content block in a multi-column element.

This property accepts the same values as the page-break-after property, plus the following values:

page

Always force a page break after the generated box.

column

Always force a column break after the generated box.

avoid-page

Avoid a page break after the generated box.

avoid-column

Avoid a column break after the generated box.

break-inside

Specifies the column-break behavior that occurs within a content block in a multi-column element.

This property accepts the same values as the page-break-inside property, plus the following values:

avoid-page

Avoid a page break inside the generated box.

avoid-column

Avoid a column break inside the generated box.

 

Following is an example of several of these properties within a selector:


<style type="text/css">
#multicol5 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol5 h2 {
  column-span: all;
  background: lightgreen;
}
#multicol5 blockquote {
  break-inside: avoid-column;
}
</style>


In this example, all h2 elements are preceded by a column break as well as a 2-em margin, and no column breaks can appear within a blockquote element. You can view these selectors applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)

Specifying column span

You can specify a content block to span across several columns. An element that has been spanned across several columns effectively acts as a break between the content before and the content after the span. The following property controls column spanning:

PropertyDescription

column-span

Specifies the number of columns that a content block spans in a multi-column element.

The possible values for this property are:

all

The content block spans all columns on a page. All content that is declared before the content block is shown before the content block.

"1"

This is the default value. The content block does not span multiple columns.

 

Following is an example of this property within a selector:


<style type="text/css">
#multicol6 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol6 h2 {
  column-span: all;
  background: lightgreen;
}
</style>


In this case, all h2 elements span all columns, and have a light-green background.

You can view these selectors applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)

Balancing column content

You can specify whether to balance the content of your columns—that is, minimize the variation in column length. Otherwise, columns are filled sequentially and will have different lengths.

The following property controls column filling:

PropertyDescription

column-fill

Specifies how the column lengths in a multi-column element are affected by the content flow.

The possible values for this property are the following keywords:

balance

Columns are filled sequentially such that the column heights are as balanced as possible, depending on other column property values.

auto

This is the default value. Columns are filled sequentially such that the columns might differ in length, depending on other column property values.

Column balancing is also dependent on the values of the orphans and widows properties, if set.

 

Following is an example of this property within a selector:


<style type="text/css">
#multicol7 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
  column-fill: balance;
}
</style>


In this case, the column-fill property has been set to balance, which means that column lengths are as balanced as possible.

You can view these selectors applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)

API Reference

Multi-column Layout

Samples and tutorials

CSS Multi-column layout sample
Design adaptive websites

Internet Explorer Test Drive demos

Tweet Columns
Hands On: Multi-column layout

IEBlog posts

IE10 Platform Preview and CSS Features for Adaptive Layouts

Specification

CSS Multi-column Layout Module

 

 

Show:
© 2014 Microsoft. All rights reserved.