CSS Multi-column Layout Module Level 2

1. Introduction

(This section is not normative.)

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

Other layout methods in CSS, when applied to a parent element, change the display properties of the direct children. For example if a three column grid layout is created, the direct children of the grid container become grid items and are placed into the column tracks, one element per cell with additional rows created as needed.

The child elements of a multi-column container however continue in normal flow, that flow is arranged into a number of columns. These columns have a flexible inline size, and therefore respond to available space by changing the size or number of columns displayed.

Multi-column layouts are easy to describe in CSS. Here is a simple example:

body { column-width: 12em }

The number of columns can also be set explicitly in the style sheet:

body { column-count: 2 }

The shorthand columns property can be used to set either, or both, properties in one declaration.

body { columns: 2 }
body { columns: 12em }
body { columns: 2 12em }

Another group of properties introduced in this module describe gaps and rules between columns.

body {
  column-gap: 1em;
  column-rule: thin solid black;
}

The values of the column-rule property are similar to those of the CSS border properties. Like border, column-rule is a shorthand property.

body {
  column-gap: 1em;
  column-rule-width: thin;
  column-rule-style: solid;
  column-rule-color: black;
}

The column-fill and column-span properties give style sheets a wider range of visual expressions in multi-column layouts.

div { column-fill: balance }
h2 { column-span: all }

This specification introduces ten new properties, all of which are used in the examples above.

If all column properties have their initial value, the layout of an element will be identical to a multi-column layout with only one column.

Column gaps (diagonal hatching) and column rules are shown in this sample rendition of a multi-column container with padding (cross hatching). The hatched areas are present for illustrational purposes only. In actual implementations these areas will be determined by the background, the second image shows a rendering of a multi-column container with column-rules.

1.1. Value Definitions

This specification follows the CSS property definition conventions from [CSS21] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

2. Module Interactions

This document defines new features not present in earlier specifications. In addition, once final, it will replace and supersede the following:

• The CSS Multi-Column Layout Module Level 1

3. The multi-column model

An element whose column-width, column-count, or column-height property is not auto establishes a multi-column container (or multicol container for short), and therefore acts as a container for multi-column layout.

In the traditional CSS box model, the content of an element is flowed into the content box of the corresponding element. Multi-column layout introduces a fragmentation context formed of anonymous fragmentation containers called column boxes (or columns for short). These column boxes establish an independent block formatting context into which the multi-column container’s content flows, and form the containing block for its non-positioned children.

In this example, the width of the image is set with these rules:

img {
  display: block;
  width: 100%;
}

Given that the column box creates a new block formatting context, the width is calculated relative to the column box. Therefore the image will not overflow the column box:

Given that the column box creates a new block formatting context, a top margin set on the first child element of a multicol container will not collapse with the margins of the multicol container.

Floats that appear inside multi-column layouts are positioned with regard to the column box where the float appears.

In this example, this CSS fragment describes the presentation of the image:

img {
  display: block;
  float: right;
}

In the HTML, the image appears after the sentence ending, "the leg of a chicken".

Content overflowing a column box in the block axis fragments and continues in the next column box.

Note: Column boxes, which are anonymous boxes, do not become the containing block for absolutely positioned boxes. The position property, which establishes a containing block for such boxes, applies to the multicol container, it being the principal box.

In this example, the multi-column container has position: relative thus becoming the containing block. The image is a direct child of the multi-column container and has position: absolute. It takes positioning from the multi-column container and not from the column box.

.container {
  position: relative;
  column-count: 3;
}
img {
  position: absolute;
  top: 20px;
  left: 40px;
}

Out-of-flow descendants of a multi-column container do affect column balancing, and the block-size of the multi-column container.

The column boxes are ordered in the inline base direction of the multicol container and arranged into multicol rows. A multicol row contains at least one multicol line or spanning element. The column width is the length of the column box in the inline direction. The column height is the length of the column box in the block direction. All column boxes in a line have the same column width, and all column boxes in a line have the same column height.

Note: In text set using a vertical writing mode, the block direction runs horizontally. In a vertical writing mode columns are laid out horizontally, and the direction of the flow of blocks may be right to left, or left to right. The column-width property therefore refers to the inline size of the column, and not the physical horizontal width.

In the inline direction, within each multicol line in the multi-column container, adjacent column boxes are separated by a column gap, which may contain a column rule. In the block direction, column rows are separated by a row gap, which may contain a row rule. All column gaps in the same multi-column container are equal. All column rules in the same multi-column container are also equal, if they appear; column rules only appear between columns that both have content.

In the simplest case a multicol container will contain only one line of columns, inside one multicol row, and the height of each column will be equivalent to the used height of the multi-column container’s content box. However, fragmentation or spanners can split the content of the multicol row into multiple multicol lines.

If the multi-column container is paginated, the height of each column is constrained by the page and the content continues in a new line of column boxes on the next page; a column box never splits across pages.

If a multi-column container in continuous media is set to wrap, the height of each column is defined by the column-height property. If there is more content than will fit in a single row a new multicol row is created in the block direction, with columns of the size defined by the column-height property. If a row is only partially filled with content, the size defined by column-height is still maintained with empty space following the content.

When a spanning element divides the multi-column container: a new multicol line is created. The columns before the spanning element are balanced and shortened to fit their content. Content after the spanning element then flows into a new, subsequent multicol line of column boxes.

If the spanning element is larger in the block direction than the space available in the current multicol row, the row geometry is maintained. The spanner is allowed to cross the row boundary, over any gap, and into the next row.

A multi-column container therefore is a regular block container that establishes a new independent formatting context whose contents consist of one or more multicol rows, containing multicol lines and multicol spanners. Each multi-column line acts as a block-level box that establishes a multi-column formatting context for its column boxes; and each spanner acts as a block-level box that establishes an independent formatting context with its type depending on its display value as usual.

Nested multi-column containers are allowed, but there may be implementation-specific limits.

Note: It is not possible to set properties/values on column boxes. For example, the background of a certain column box cannot be set and a column box has no concept of padding, margin or borders. Future specifications may add additional functionality. For example, columns of different widths and different backgrounds may be supported.

Note: Multicol containers with column heights larger than the viewport may pose accessibility issues. See Accessibility Considerations for more details.

4. The number and size of columns

Finding the number and size of columns is fundamental when laying out multi-column content. These properties are used to set the number and size of columns:

• column-count
• column-width
• column-height

A fourth property, columns, is a shorthand property which sets all of column-width, column-height, and column-count.

Other factors, such as explicit column breaks, content, column wrapping, and size constraints, may influence the actual number and size of columns.

4.1. The Inline Size of Columns: the column-width property

This property describes the width of columns in multicol containers.

auto

means that the column width will be determined by other properties (e.g., column-count, if it has a non-auto value).

<length [0,∞]>

describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Negative values are not allowed. Used values will be clamped to a minimum of 1px.

div {
  width: 100px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

div {
  width: 40px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

To ensure that column-width can be used with vertical text, column width means the length of the line boxes inside the columns.

Note: The reason for making column-width somewhat flexible is to achieve scalable designs that can fit many screen sizes. To set an exact column width, the column gap and the width of the multicol container (assuming horizontal text) must also be specified.

4.2. The Block Size of Columns: the column-height property

This property describes the height of columns in multicol containers.

auto

means that the column height will be determined by the amount of content and other properties.

<length [0,∞]>

describes the desired column height. Negative values are not allowed.

If you set column-height and height on a multicol container, you may end up with some additional space. The properties defined in the [CSS-ALIGN] specification detail how to deal with it.

When column-height is not auto the size in the block direction is not flexible. If there is not enough content to fill a row of columns at the set size, empty space is left.

If a spanner is introduced that is taller than the set size, the row geometry will be maintained, and the spanner will overflow into the next row, crossing any row-gap.

4.3. The Number of Columns: the column-count property

This property describes the number of columns of a multicol container.

auto

means that the number of columns will be determined by other properties (e.g., column-width, if it has a non-auto value).

<integer [1,∞]>

describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both column-width and column-count have non-auto values, the integer value describes the maximum number of columns.

body { column-count: 3 }

4.4. The overflow direction: the column-wrap property

The column-wrap property controls the behavior of overflow columns. Overflow columns occur when there is more content than will fit in a single row of columns at the specified column-height, or inside a height defined by the multicol container.

auto

If column-height is not auto behaves as the value wrap otherwise acts as nowrap.

nowrap

Overflow columns are created in the inline direction.

wrap

Overflow columns create a new multicol row in the block direction.

body {
  column-count: 3;
  column-wrap: nowrap;
  column-height: 10em;
}

body {
    column-count: 3;
    column-wrap: wrap;
  column-height: 10em;
}

Note: The reading flow of a 2-dimensional multiple-column layout follows along the row, reading each column in row 1 in turn, then moving onto row 2, and so on. Authors should ensure that it’s clear to a reader how the content flows, particularly in situations where multiple rows are displayed on screen.

The issue relating to the addition of this property is still open due to debate as to whether it’s required. [Issue #11754]

What happens if you set a height on the multicol container, 'column-wrap: wrap' but no column-height? Options are 1: The column-wrap property is ignored. 2: 'column-height: auto' resolves to the available space in the multicol container and new rows of that size are created for the overflow, thus honoring the wrap value. [Issue #11754]

4.5. The column-width, column-count, and column-height Shorthand: The columns Property

This is a shorthand property for setting column-width, column-count, and column-height. Omitted values are set to their initial values. This property also resets the column-wrap property to its initial value.

columns: 12em;      /* column-width: 12em; column-count: auto */
columns: auto 12em; /* column-width: 12em; column-count: auto */
columns: 2;         /* column-width: auto; column-count: 2 */
columns: 2 auto;    /* column-width: auto; column-count: 2 */
columns: auto;      /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */
columns: 12em / 14em; /* column-width: 12em; column-height: 14em; */

4.6. The Pseudo-algorithm

The pseudo-algorithm below determines the used values for column-count (N) and column-width (W). There is one other variable in the pseudo-algorithm: U is the used width of the multi-column container.

Note: The used width U of the multi-column container can depend on the element’s contents, in which case it also depends on the computed values of the column-count and column-width properties. This specification does not define how U is calculated. Another module (probably the Basic Box Model [CSS3BOX] or the Box Sizing Module [CSS3-SIZING]) is expected to define this.

The floor(X) function returns the largest integer Y ≤ X.

(01)  if ((column-width = auto) and (column-count = auto)) then
(02)      exit; /* not a multicol container */
(03)  if column-width = auto then
(04)      N := column-count
(05)  else if column-count = auto then
(06)      N := max(1,
(07)        floor((U + column-gap)/(column-width + column-gap)))
(08)  else
(09)      N := min(column-count, max(1,
(10)        floor((U + column-gap)/(column-width + column-gap))))

And:

(11)  W := max(0, ((U + column-gap)/N - column-gap))

For the purpose of finding the number of auto-repeated columns, the UA must floor the column size to a UA-specified value to avoid division by zero. It is suggested that this floor be 1px or less.

In fragmented contexts such as in paged media, user agents may perform this calculation on a per-fragment basis.

The used value for column-count is calculated without regard for explicit column breaks or constrained column heights, while the actual value takes these into consideration.

In this example, the actual column-count is higher than the used column-count due to explicit column breaks:

div {
  width: 40em;
  columns: 20em;
  column-gap: 0;
}

p {
  break-after: column;
}

<div>
  <p>one
  <p>two
  <p>three
</div>

div {
  width: 80em;
  height: 10em;
  columns: 20em;
  column-gap: 0;
  column-fill: auto;
}

<div>foo</div>

4.7. Stacking Context

All column boxes in a multi-column container are in the same stacking context and the drawing order of their contents is as specified in CSS 2.1. Column boxes do not establish new stacking contexts.

4.8. Styling Columns: the ::column pseudo-element

The ::column pseudo-element represents the individual columns in a multi-column container. It only exists on multi-column containers.

A multi-column container has as many ::column pseudo-elements as it has columns. They cannot be individually addressed; any styles applied to a multicol’s ::column pseudo-elements apply to all of them on that element. Each ::column has the same size and position as its corresponding column: the same size as the column’s available space in the inline axis and the container’s content box in the block axis. (It does not cover the gaps/rules between columns.)

::column pseudo-elements are treated as children of their multi-column container, without any contents. They do not wrap the contents of the column, just fill the same space.

The ::column pseudo-element accepts only a very limited set of properties:

• scroll-margin, scroll-snap-align, and scroll-snap-stop (the scroll snap properties that apply to elements inside a scroll container)

Additionally, a ::column pseudo-element can have a ::scroll-marker pseudo-element of its own, as ::column::scroll-marker. (Other pseudo-elements do not exist on ::column.) Such ::scroll-marker pseudo-elements inherit from the ::column pseudo-element’s originating element, rather than the ::column itself.

Note: This list of properties and pseudo-elements that work on ::column will likely be expanded in the future, as we develop more features that could usefully care about the position of a column without caring about the contents.

5. Column Gaps and Rules

Column gaps and rules are placed between columns in the same multicol container. The length of the column gaps and column rules is equal to the column height. Column gaps take up space. That is, column gaps will push apart content in adjacent columns (within the same multicol container).

A column rule is drawn in the middle of the column gap with the endpoints at opposing content edges of the multicol container. Column rules do not take up space. That is, the presence or thickness of a column rule will not alter the placement of anything else. If a column rule is wider than its gap, the adjacent column boxes will overlap the rule, and the rule may possibly extend outside the box of the multicol container. Column rules are painted just above the border of the multicol container. For scrollable multicol containers, note that while the border and background of the multicol container obviously aren’t scrolled, the rules need to scroll along with the columns. Column rules are only drawn between two columns that both have content.

5.1. Gutters Between Columns: the column-gap property

The column-gap property is defined in [CSS3-ALIGN].

In a multi-column formatting context the used value of normal for the column-gap property is 1em. This ensures columns are readable when the initial values are used. If there is a column rule between columns, it will appear in the middle of the gap.

5.2. Gutters Between Rows: the row-gap property

The row-gap property is defined in [CSS3-ALIGN].

In a multi-column formatting context the used value of normal for the row-gap property is 1em. If there is a rule between rows, it will appear in the middle of the gap.

5.3. The Color of Column Rules: the column-rule-color property

<color>

Specifies the color of the column rule.

5.4. The Style Of Column Rules: the column-rule-style property