GeezerVison

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 }

If a column-height is set, and there is more content that will fit in one row of columns at the specified height, multiple rows of columns are created in the block direction.

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

The shorthand columns property can be used to set all three properties in one declaration.

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

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 }

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.

Tests

• zero-column-width-computed-style.html (live test) (source)
• zero-column-width-layout.html (live test) (source)

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 'column-height/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 'column-height/auto' behaves as the value 'column-wrap/wrap' otherwise acts as 'column-wrap/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 'column-wrap/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) and (column-height = 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).

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, Width, and Style of Column Rules: the gap decoration properties

The gap decoration properties of column-rule and row-rule, along with their longhands column-rule-color, row-rule-color, column-rule-style, row-rule-style, column-rule-width, row-rule-width are defined in [CSS-GAPS].

6. Column Breaks

When content is laid out in multiple columns, the user agent must determine where column breaks are placed. The problem of breaking content into columns is similar to breaking content into pages, which is described in CSS 2.1, section 13.3.3 [CSS21].

Three new properties are introduced to allow column breaks to be described in the same properties as page breaks: break-before, break-after, and break-inside.

6.1. Controlling Fragmentation: the break-before, break-after, break-inside properties

break-before, break-after, and break-inside are defined in [CSS3-BREAK].

7. Spanning columns

The column-span property makes it possible for an element to span across several columns. This specification adds <integer> to the values available in the previous level.

7.1. column-span

This property describes how many columns an element spans across. Values are:

none

The element does not span multiple columns.

Tests

• multicol-span-none-001.xht (live test) (source)

all

The element forces a column break and is taken out of flow to span across all columns of the current multicol row in the same block formatting context. Content in the normal flow that appears before the element is automatically balanced across all columns in the immediately preceding multi-column line before the element appears, and any subsequent content flows into a new multi-column line after the element. The element establishes an independent formatting context.

Note: Whether the element establishes a new formatting context does not depend on whether the element is a descendant of a multicol or not. When column-span is all, it always does. This helps with robustness of designs to later revisions that remove the multicol, or when media queries turn the multicol off in some situations.

Tests

• multicol-span-000.xht (live test) (source)
• multicol-span-all-001.xht (live test) (source)
• multicol-span-all-003.xht (live test) (source)
• multicol-span-all-block-sibling-003.xht (live test) (source)
• multicol-span-all-margin-001.xht (live test) (source)
• multicol-span-all-margin-002.xht (live test) (source)
• multicol-span-all-margin-003.html (live test) (source)
• multicol-span-all-margin-bottom-001.xht (live test) (source)
• multicol-span-all-margin-nested-001.xht (live test) (source)
• multicol-span-all-margin-nested-002.xht (live test) (source)
• multicol-span-all-margin-nested-firstchild-001.xht (live test) (source)
• multicol-span-float-001.xht (live test) (source)
• multicol-span-float-002.html (live test) (source)
• multicol-span-float-003.html (live test) (source)
• multicol-span-float-004.html (live test) (source)
• inline-block-and-column-span-all.html (live test) (source)
• multicol-span-all-dynamic-remove-001.html (live test) (source)
• multicol-span-all-dynamic-add-001.html (live test) (source)
• multicol-span-all-dynamic-remove-002.html (live test) (source)
• multicol-span-all-dynamic-add-002.html (live test) (source)
• multicol-span-all-dynamic-remove-003.html (live test) (source)
• multicol-span-all-dynamic-add-003.html (live test) (source)
• multicol-span-all-dynamic-remove-004.html (live test) (source)
• multicol-span-all-dynamic-add-004.html (live test) (source)
• multicol-span-all-dynamic-add-005.html (live test) (source)
• multicol-span-all-dynamic-remove-005.html (live test) (source)
• multicol-span-all-dynamic-remove-006.html (live test) (source)
• multicol-span-all-dynamic-add-006.html (live test) (source)
• multicol-span-all-dynamic-remove-007.html (live test) (source)
• multicol-span-all-dynamic-add-007.html (live test) (source)
• multicol-span-all-dynamic-add-008.html (live test) (source)
• multicol-span-all-dynamic-add-009.html (live test) (source)
• multicol-span-all-dynamic-add-010.html (live test) (source)
• multicol-span-all-dynamic-add-011.html (live test) (source)
• multicol-span-all-dynamic-add-012.html (live test) (source)
• multicol-span-all-dynamic-add-013.html (live test) (source)
• multicol-span-all-dynamic-add-014.html (live test) (source)
• multicol-span-all-children-height-001.html (live test) (source)
• multicol-span-all-children-height-002.html (live test) (source)
• multicol-span-all-children-height-003.html (live test) (source)
• multicol-span-all-children-height-004a.html (live test) (source)
• multicol-span-all-children-height-004b.html (live test) (source)
• multicol-span-all-children-height-005.html (live test) (source)
• multicol-span-all-children-height-006.html (live test) (source)
• multicol-span-all-children-height-007.html (live test) (source)
• multicol-span-all-children-height-008.html (live test) (source)
• multicol-span-all-children-height-009.html (live test) (source)
• multicol-span-all-children-height-010.html (live test) (source)
• multicol-span-all-children-height-011.html (live test) (source)
• multicol-span-all-children-height-012.html (live test) (source)
• multicol-span-all-children-height-013.html (live test) (source)
• multicol-span-all-004.html (live test) (source)
• multicol-span-all-005.html (live test) (source)
• multicol-span-all-006.html (live test) (source)
• multicol-span-all-007.html (live test) (source)
• multicol-span-all-008.html (live test) (source)
• multicol-span-all-009.html (live test) (source)
• multicol-span-all-010.html (live test) (source)
• multicol-span-all-011.html (live test) (source)
• multicol-span-all-012.html (live test) (source)
• multicol-span-all-013.html (live test) (source)
• multicol-span-all-014.html (live test) (source)
• multicol-span-all-015.html (live test) (source)
• multicol-span-all-016.html (live test) (source)
• multicol-span-all-017.html (live test) (source)
• multicol-span-all-018.html (live test) (source)
• multicol-span-all-019.html (live test) (source)
• multicol-span-all-020.html (live test) (source)
• multicol-span-all-rule-001.html (live test) (source)
• multicol-span-all-rule-002.html (live test) (source)
• multicol-span-all-button-001.html (live test) (source)
• multicol-span-all-button-002.html (live test) (source)
• multicol-span-all-button-003.html (live test) (source)
• multicol-span-all-fieldset-001.html (live test) (source)
• multicol-span-all-fieldset-002.html (live test) (source)
• multicol-span-all-fieldset-003.html (live test) (source)
• multicol-span-all-restyle-001.html (live test) (source)
• multicol-span-all-restyle-002.html (live test) (source)
• multicol-span-all-restyle-003.html (live test) (source)
• multicol-span-all-restyle-004.html (live test) (source)
• multicol-span-all-list-item-001.html (live test) (source)
• multicol-span-all-list-item-002.html (live test) (source)
• multicol-span-auto-size-in-vertical-writing-mode-001.html (live test) (source)
• multicol-span-auto-size-in-vertical-writing-mode-002.html (live test) (source)
• float-with-line-after-spanner.html (live test) (source)
• parallel-flow-after-spanner-001.html (live test) (source)
• parallel-flow-after-spanner-002.html (live test) (source)
• margin-and-break-before-child-spanner.html (live test) (source)
• multicol-width-004.html (live test) (source)

<integer [1,∞]>

The element spans the specified number of columns. Values must be greater than 0. If the specified integer value is equal to, or larger than the number of columns in the multicol element, the number of columns spanned will be the same as if column-span: all had been specified.

This definition is insufficient.

• Does column-span: 1 count as column-span: none, or does it create a spanner (which is a BFC)?
• Which columns does it span?
• How does that affect height calculations, and interact with column-fill

auto

The number of columns spanned by the element depends on its min-content outer size in the inline direction of the multi-column container. If it is smaller than the used value of column-width, this is the same as if column-span: none had been specified. Otherwise, the number of columns spanned is the smallest positive integer n for which n × column-width + (n - 1) × column-gap is larger than the min-content outer size. If this would be larger than the number of columns, the number of columns spanned will be the same as if column-span: all had been specified.

If column-span: 1 does not do the same as column-span: none, should this behave as column-span: 1 or as column-span: none when the element is small enough?

An element that spans more than one column is called a multi-column spanning element and the box it creates is called a multi-column spanner.

The containing block of the spanner is the multicol container itself. Consequently, in cases where the spanner itself does not establish a containing block for absolutely positioned boxes inside the spanner, their containing block chain skips directly to the multicol container (skipping any ancestors between the spanner and the multicol container).

Although the spanner is taken out-of-flow, this does not affect the painting order [CSS21] of the spanning element.

In this example, an h2 element has been added to the sample document after the sixth sentence (i.e., after the words "the leg of a"). This styling applies:

h2 { column-span: all; background: silver }

By setting column-span to all, all content that appears before the h2 element is shown above the h2 element.

Note that because the spanner splits the multi-column line, it also interrupts any column rules (which are only drawn between columns in a multi-column line).

A spanning element may be lower than the first level of descendants as long as they are part of the same formatting context, and there is nothing between the spanning element and multicol container that establishes a containing block for fixed position descendants.

<article>
  <section>
    <div class="spanner">Attempted spanner</div>
  </section>
</article>

article {
  columns: 2;
}

section {
  transform: rotate(90deg);
}

.spanner {
  column-span: all;
  background: silver;
}

If the fragment before the spanner is empty, nothing special happens; the top margin/border/padding is above the spanning element, as an empty fragment.

In this example the multicol container is the article element. Inside this parent is a paragraph and then a section element. The section contains an h2 heading set to all this spans all three columns while the containing section remains inside the column boxes.

The h2 is the first child of the section. This means that the margin, border (shown in red in the diagram) and padding on this section appear before the spanning h2 as an empty fragment.

<article>
  <p>...</p>
  <section>
    <h2>An h2 element</h2>
    <p>...</p>
  </section>
</article>

section {
  border: 2px solid red;
  margin-top: 65px;
  padding-top: 20px;
}

h2 {
  column-span: all;
  background: silver
}

A spanning element takes up more space than the element would take up otherwise. When space is limited, it may be impossible to find room for the spanning element. In these cases, user agents may treat the element as if none had been specified on this property.

In this example, the h2 element appears later in the content, and the height of the multicol container is constrained. Therefore, the h2 element appears in the overflow and there is not room to make the element spanning. As a result, the element appears as if column-span: none was specified.

This example is similar to the previous example, except that the H2 element appears naturally in the last column. Still, there is not enough room to make the element spanning.

In fragmented contexts spanning elements are honored in all fragments. In this example, we are in paged media, and the first three paragraphs have column breaks after them. A spanning H2 element appears after the fourth paragraph.

Spanners are block-level boxes therefore the margins of two adjacent spanners will collapse with each other. The margins of two spanners separated only by an absolutely positioned item will collapse with each other, as absolutely positioned items do not create column boxes. As column boxes establish a new block formatting context, margins on elements inside a column box will not collapse with the margin of a spanner.

Spanners establish new formatting contexts, but their margins can be changed by their surroundings. In this example, two spanners naturally end up at the top of a page. The top margin of the first spanner is truncated due to adjoining an unforced break. The margins between the two spanners collapse with each other. However, the bottom margin of the second spanner does not collapse with the top margin of the subsequent element.

h2 {
  margin: 16px 0;
  column-span: all;
  background: silver
}
p { margin-top: 16px }

8. Filling Columns

There are two strategies for filling columns: columns can either be balanced, or not. If columns are balanced, user agents should try to minimize variations in column height, while honoring forced breaks, widows and orphans, and other properties that may affect column heights. If columns are not balanced, they are filled sequentially; some columns may end up partially filled, or with no content at all.

8.1. Column Balancing: the column-fill property

This property specifies whether content in a multi-column line that does not immediately precede a spanner is balanced across columns or not.

The values are:

balance

Balance content equally between columns, as far as possible. In fragmented contexts, only the last fragment is balanced.

Tests

• multicol-fill-000.xht (live test) (source)
• multicol-fill-001.xht (live test) (source)
• column-fill-invalid.html (live test) (source)
• column-fill-valid.html (live test) (source)
• column-fill-computed.html (live test) (source)
• column-fill-balance-orthog-block-001.html (live test) (source)
• column-balancing-paged-001-print.html (live test) (source)
• multicol-fill-balance-001.xht (live test) (source)
• multicol-fill-balance-002.html (live test) (source)
• multicol-fill-balance-003.html (live test) (source)
• multicol-fill-balance-004.html (live test) (source)
• multicol-fill-balance-005.html (live test) (source)
• multicol-fill-balance-006.html (live test) (source)
• multicol-fill-balance-007.html (live test) (source)
• multicol-fill-balance-008.html (live test) (source)
• multicol-fill-balance-009.html (live test) (source)
• multicol-fill-balance-010.html (live test) (source)
• multicol-fill-balance-011.html (live test) (source)
• multicol-fill-balance-012.html (live test) (source)
• multicol-fill-balance-013.html (live test) (source)
• multicol-fill-balance-014.html (live test) (source)
• multicol-fill-balance-015.html (live test) (source)
• multicol-fill-balance-016.html (live test) (source)
• multicol-fill-balance-018.html (live test) (source)
• multicol-fill-balance-019.html (live test) (source)
• multicol-fill-balance-020.html (live test) (source)
• multicol-fill-balance-021.html (live test) (source)
• multicol-fill-balance-022.html (live test) (source)
• multicol-fill-balance-023.html (live test) (source)
• multicol-fill-balance-024.html (live test) (source)
• multicol-fill-balance-025.html (live test) (source)
• multicol-fill-balance-026.html (live test) (source)
• multicol-fill-balance-027.html (live test) (source)
• multicol-fill-balance-028.html (live test) (source)
• multicol-fill-balance-030.html (live test) (source)
• multicol-fill-balance-031.html (live test) (source)
• multicol-fill-balance-032.html (live test) (source)
• multicol-fill-balance-033.html (live test) (source)
• multicol-fill-balance-034.html (live test) (source)
• multicol-fill-balance-035.html (live test) (source)
• multicol-fill-balance-036.html (live test) (source)
• multicol-fill-balance-037.html (live test) (source)
• multicol-fill-balance-038.html (live test) (source)
• multicol-fill-balance-039.html (live test) (source)
• multicol-fill-balance-nested-000.html (live test) (source)

balance-all

Balance content equally between columns, as far as possible. In fragmented contexts, all fragments are balanced.

auto

fill columns sequentially

Tests

• multicol-fill-auto-001.xht (live test) (source)
• multicol-fill-auto-002.xht (live test) (source)
• multicol-fill-auto-003.xht (live test) (source)
• multicol-fill-auto-004.html (live test) (source)
• multicol-fill-auto-block-children-001.xht (live test) (source)
• multicol-fill-auto-block-children-002.xht (live test) (source)
• multicol-fill-auto-block-children-003.html (live test) (source)
• columnfill-auto-max-height-001.html (live test) (source)
• columnfill-auto-max-height-002.html (live test) (source)
• columnfill-auto-max-height-003.html (live test) (source)

In continuous contexts, this property does not have any effect when there are overflow columns.

In this example, an article only has one short paragraph which fits on three lines. The three lines are displayed in three different columns due to column balancing.

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

In this example, column balancing is turned off, and the article has a height:

article {
  width: 60em;
  height: 4em;
  columns: 4;
  column-fill: auto;
}

As a result, the first column is filled with all content:

In this example, an article has two paragraphs: first a long one, then a shorter one. This code is applied:

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

p {
  break-after: column;
}

The shortest column height possible contains five lines of text. After the column height has been established, columns are filled sequentially. As a result, the third column is as high as the first two columns, while the last column ends up being significantly shorter.

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

In this example, an article starts with an unbreakable figure which sets the column height. Subsequent content is filled sequentially into the remaining columns:

9. Overflow

9.1. Overflow Inside Multicol Containers

Except for cases where this would cause a column break, content that extends outside column boxes visibly overflows and is not clipped to the column box.

Note: See § 6 Column Breaks for column breaks and § 9.2 Pagination and Overflow Outside Multicol Containers for whether it is clipped to the multi-column container’s content box.

In this example, the image is wider than the column:

9.2. Pagination and Overflow Outside Multicol Containers

Content and column rules that extend outside column boxes at the edges of the multi-column container are clipped according to the overflow property.

A multicol container can have more columns than it has room for due to:

• a declaration that constrains the multicol container height (e.g., using height or max-height). In this case, additional column boxes are created in the wrapping direction (by default, the inline direction).
• the size of the page. In this case, additional column boxes are moved to the next page(s).
• explicit column breaks. In this case, additional column boxes are created in the in the wrapping direction (by default, the inline direction for continuous contexts). and additional column boxes are moved to the next fragment(s) for fragmented media.

Columns that appear outside the multicol container in continuous contexts are called overflow columns. Overflow columns in the inline direction can affect the height of the multicol container.

In this example, the height of the multi-column container has been constrained to a maximum height. Also, the style sheet specifies that overflowing content should be visible:

div {
  max-height: 5em;
  overflow: visible;
}

As a result, the number of columns is increased.

In continuous contexts overflow columns in the inline direction can affect the height of the multicol container. In this example a column appears in the overflow which has four lines of text. The multicol container is made tall enough to accommodate this column.

In fragmented contexts, the overflow content goes into columns in subsequent fragments. Given the same content as in example 31 and a page box that only has room for five lines of formatted text, this would appear on the first page:

Assuming column balancing, this would appear on the second page:

In this example, explicit column breaks are generated after paragraphs:

p {
  break-after: column;
}

As a result, the number of columns increases and the extra columns are added in the inline direction:

In paged media, extra columns are shown on the next page. Given the same code as the previous example, the last paragraph appears on the second page. This would appear on the first page:

This would appear on the second page:

Due to column balancing, the last paragraph is split across three columns.

Appendix B. Changes

This appendix is informative.

Changes from the First Public Working Draft of 19 December 2024

• Removed the special case of column-rule-width having a computed value of 0 when column-rule-style is none or hidden. (Issue 11494)

Changes from the Candidate Recommendation (CR) of CSS-MULTICOL-1 of 16 May 2024

• Defines that the size of the columns in the block direction is maintained when column-height is set, even if there’s not enough content to fill a row. Resolved 20 August 2025
• Defines that spanners only span the current row of columns when wrapping. Resolved 20 August 2025
• Defines what happens when a spanner is larger than the available space in the block direction. Resolved 20 August 2025
• Updates the columns shorthand property to include column-height. Resolved 6 Aug 2025.
• Adds a draft of proposed column-wrap property.
• Adds the column-height property. Resolved 30 Jan 2025.
• Adds the ::column pseudo-element. Resolved 27 Sep 2024.
• Adds a draft of proposed <integer> and auto values for column-span.

Privacy Considerations

Multicol introduces no new privacy leaks.

Security Considerations

Multicol introduces no new security considerations.

Accessibility Considerations

Setting container height and line length can pose challenges for people with visual or cognitive disabilities. See WCAG Success Criterion 1.4

[Page truncated to keep GeezerVison snappy.]