The Width Of Column Rules: the 'column-rule-width' property

	Name: column-rule-width
	Value: <>
	Initial: medium
	Applies to: multicol containers
	Inherited: no
	Percentages: N/A
	Computed value: absolute length, [=snapped as a border width=]; ''0'' if the column rule style is ''border-style/none'' or ''hidden''
	Animation type: by computed value type
	

Column Rule Shorthand: the 'column-rule' property

	Name: column-rule
	Value: <<'column-rule-width'>> || <<'column-rule-style'>> || <<'column-rule-color'>>
	

In this example, the [=column rule=] and the [=column gap=] have the same width. Therefore, they will occupy exactly the same space.

		body {
			column-gap: 35px;
			column-rule-width: 35px;
			column-rule-style: solid;
			column-rule-color: black;
		}
		

equal-gap-and-rule.html multicol-rule-samelength-001.xht fixed-size-child-with-overflow.html

Column Breaks

Controlling Fragmentation: the 'break-before', 'break-after', 'break-inside' properties

Spanning Columns

Spanning An Element Across Columns: the 'column-span' property

	Name: column-span
	Value: none | all
	Initial: none
	Applies to: in-flow block-level elements
	Inherited: no
	Percentages: N/A
	Computed value: specified keyword
	Animation type: discrete
	

none

The element does not span multiple columns. multicol-span-none-001.xht

all

The element forces a column break and is taken [=out of flow=] to span across all columns of the nearest multicol ancestor 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 ''column-span/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. multicol-span-000.xht multicol-span-all-001.xht multicol-span-all-003.xht multicol-span-all-block-sibling-003.xht multicol-span-all-margin-001.xht multicol-span-all-margin-002.xht multicol-span-all-margin-003.html multicol-span-all-margin-bottom-001.xht multicol-span-all-margin-nested-001.xht multicol-span-all-margin-nested-002.xht multicol-span-all-margin-nested-firstchild-001.xht multicol-span-float-001.xht multicol-span-float-002.html multicol-span-float-003.html inline-block-and-column-span-all.html multicol-span-all-dynamic-remove-001.html multicol-span-all-dynamic-add-001.html multicol-span-all-dynamic-remove-002.html multicol-span-all-dynamic-add-002.html multicol-span-all-dynamic-remove-003.html multicol-span-all-dynamic-add-003.html multicol-span-all-dynamic-remove-004.html multicol-span-all-dynamic-add-004.html multicol-span-all-dynamic-add-005.html multicol-span-all-dynamic-remove-005.html multicol-span-all-dynamic-remove-006.html multicol-span-all-dynamic-add-006.html multicol-span-all-dynamic-remove-007.html multicol-span-all-dynamic-add-007.html multicol-span-all-dynamic-add-008.html multicol-span-all-dynamic-add-009.html multicol-span-all-dynamic-add-010.html multicol-span-all-dynamic-add-011.html multicol-span-all-dynamic-add-012.html multicol-span-all-dynamic-add-013.html multicol-span-all-children-height-001.html multicol-span-all-children-height-002.html multicol-span-all-children-height-003.html multicol-span-all-children-height-004a.html multicol-span-all-children-height-004b.html multicol-span-all-children-height-005.html multicol-span-all-children-height-006.html multicol-span-all-children-height-007.html multicol-span-all-children-height-008.html multicol-span-all-children-height-009.html multicol-span-all-children-height-010.html multicol-span-all-children-height-011.html multicol-span-all-children-height-012.html multicol-span-all-children-height-013.html multicol-span-all-004.html multicol-span-all-005.html multicol-span-all-006.html multicol-span-all-007.html multicol-span-all-008.html multicol-span-all-009.html multicol-span-all-010.html multicol-span-all-011.html multicol-span-all-012.html multicol-span-all-013.html multicol-span-all-014.html multicol-span-all-015.html multicol-span-all-016.html multicol-span-all-017.html multicol-span-all-018.html multicol-span-all-019.html multicol-span-all-rule-001.html multicol-span-all-button-001.html multicol-span-all-button-002.html multicol-span-all-button-003.html multicol-span-all-fieldset-001.html multicol-span-all-fieldset-002.html multicol-span-all-fieldset-003.html multicol-span-all-restyle-001.html multicol-span-all-restyle-002.html multicol-span-all-restyle-003.html multicol-span-all-restyle-004.html multicol-span-all-list-item-001.html multicol-span-all-list-item-002.html float-with-line-after-spanner.html parallel-flow-after-spanner-001.html parallel-flow-after-spanner-002.html crashtests/margin-and-break-before-child-spanner.html multicol-width-004.html

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 ''column-span/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=]).

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

article {
	columns: 2;
}

section {
	transform: rotate(90deg);
}

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

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 ''column-span/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
}

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 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 }
		

Filling Columns

Column Balancing: the 'column-fill' property

	Name: column-fill
	Value: auto | balance | balance-all
	Initial: balance
	Applies to: multicol containers
	Inherited: no
	Percentages: N/A
	Computed value: specified keyword
	Animation type: discrete
	

balance

Balance content equally between columns, as far as possible. In fragmented contexts, only the last fragment is balanced. multicol-fill-000.xht multicol-fill-001.xht parsing/column-fill-invalid.html parsing/column-fill-valid.html parsing/column-fill-computed.html column-fill-balance-orthog-block-001.html column-balancing-paged-001-print.html multicol-fill-balance-001.xht multicol-fill-balance-002.html multicol-fill-balance-003.html multicol-fill-balance-004.html multicol-fill-balance-005.html multicol-fill-balance-006.html multicol-fill-balance-007.html multicol-fill-balance-008.html multicol-fill-balance-009.html multicol-fill-balance-010.html multicol-fill-balance-011.html multicol-fill-balance-012.html multicol-fill-balance-013.html multicol-fill-balance-014.html multicol-fill-balance-015.html multicol-fill-balance-016.html multicol-fill-balance-018.html multicol-fill-balance-019.html multicol-fill-balance-020.html multicol-fill-balance-021.html multicol-fill-balance-022.html multicol-fill-balance-023.html multicol-fill-balance-024.html multicol-fill-balance-025.html multicol-fill-balance-026.html multicol-fill-balance-027.html multicol-fill-balance-028.html multicol-fill-balance-nested-000.html

balance-all

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

auto

fill columns sequentially multicol-fill-auto-001.xht multicol-fill-auto-002.xht multicol-fill-auto-003.xht multicol-fill-auto-004.html multicol-fill-auto-block-children-001.xht multicol-fill-auto-block-children-002.xht multicol-fill-auto-block-children-003.html columnfill-auto-max-height-001.html columnfill-auto-max-height-002.html columnfill-auto-max-height-003.html

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:

Overflow

Overflow Inside Multicol Containers

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

Pagination and Overflow Outside Multicol Containers

• a declaration that constrains the column height (e.g., using 'height' or 'max-height'). In this case, additional column boxes are created in 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 inline direction for continuous contexts and additional column boxes are moved to the next fragment(s) for fragmented media.

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 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

Changes from the Candidate Recommendation (CR) of 12 October 2021

• Added the text "and there is nothing between the spanning element and [=multicol container=] that establishes a containing block for fixed position descendants." Resolved 9 Mar 2022

Changes from the Working Draft (WD) of 12 February 2021

• Added the text "Out-of-flow descendants of a multi-column container do affect column balancing, and the block-size of the multi-column container." Resolved 12 May 2021
• Added the text, "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." Resolved 12 May 2021
• Adds an accessibility considerations section. Request from APA after review.
• Adds a note and example to make clear the manner in which columns are laid out in vertical writing modes. Request from i18n WG after review.

Changes from the Working Draft (WD) of 15 October 2019

• Added the text "The spanner becomes the containing block for absolutely positioned boxes inside the spanner where the spanning element establishes a containing block, otherwise the containing block chain goes to the multicol container.". Resolved 23 Oct 2020
• Adding the text "This property specifies whether content in a multi-column line that does not immediately precede a spanner is balanced across columns or not." Resolved 29 April 2020

Changes from the Working Draft (WD) of 28 May 2018

• Removed the non-normative text "However, as described below, setting both the width and number of columns rarely makes sense." Editorial 16 Sep 2019, issue 4291.
• Added the paragraph, "Spanners are block-level boxes therefore the margins of two adjacent spanners will collapse with each other. 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." Resolved 22 Oct 2018, see also the resolution for issue 2582.
• Clarified the spec to explain that a spanning element is taken out-of-flow, leaving a forced break. Added the paragraph, "A spanning element is taken out-of-flow, leaving a forced break. This does not affect the painting order of the spanning element." Resolved 28 Feb 2019.
• Moved the definition of the 'column-gap' property to [[CSS3-ALIGN]] and added a paragraph detailing the specifics of 'column-gap' in multicol:
  "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." Resolved 4 June 2019.
• Reworded the section The multi-column model, based on input from Morten Stenshorne in issue 2203.
• Removed the at-risk marker from the length-percentage value for 'column-gap'. Resolved 4 June 2019.
• Updated the introduction to remove mention of the benefits of multicol over using tables for layout and instead refer to the unique characteristics of multicol. Editorial change referenced in issue 3654.
• Changed the sentence added in the pseudo-algorithm section after the 7 Jan 2016 resolution, to refer to columns and not tracks as tracks are not defined in this specification. Resolved 13 March 2019.
• Changes and clarifications to the SVG images used in the specification.
• Changed syntax to use bracketed range notation to reflect the prose restrictions on negative/non-zero values.

Changes from the Working Draft (WD) of 5 October 2017

• Changed references to paged media to refer to fragmented contexts. Resolved 12 Apr 2018.
• Changed a line regarding the column-fill property:
  In continuous media, this property does not have any effect in overflow columns.
  To:
  In continuous media, this property does not have any effect when there are overflow columns. Resolved: 12 Apr 2018
• Add a line of text plus an example to show that overflow columns can affect the multicol container height. Resolved: 12 Apr 2018
• Replaced the HTML mock-up examples with SVG versions, as the examples were unclear. Issue 1087.
• Changed the value of normal for column-gap to be 1em, rather than a UA-specified length with a suggestion of 1em. Resolved: 4 Apr 2018
• Clarified that negative values are not allowed for column-width, and that while 0 may be specified, used values will be clamped to a minimum of 1px. Resolved: 14 Mar 2018
• Clarified that where there is a spanning element content is automatically balanced across all columns in the immediately preceding column row before the element appears. Resolved: 9 Nov 2017
• Added clarification plus an additional example that spanning elements may be lower the first level of descendants, and that in the case of margins, borders and padding on the element containing the spanning, this would be drawn above the spanner. Resolved: 8 Nov 2017
• Changed the sentence Column rules are painted in the inline content layer, but below all inline content inside the multicol element. to Column rules are painted just above the border of the multicol element. For scrollable multicol elements, note that while the border and background of the multicol element obviously aren’t scrolled, the rules need to scroll along with the columns. Resolved: 7 Nov 2017
• Under section The Multi-column Model, removed two sentences That is, column boxes behave like block-level, table cell, and inline-block boxes as per CSS 2.1, section 10.1, item 2 CSS21. However, column boxes do not establish block container boxes for elements with ''position: fixed or position: absolute''.. These were replaced with a clarification about the principal box and a new example showing how abspos elements refer to the multicol container. Resolved: 7 Nov 2017
• Removed the sentence "To indicate where column breaks should (or should not) appear, new keyword values are introduced." and following example (Example 7 in the WD published 5 Oct 2017) as the multicol specification no longer introduces these properties. Editorial
• Changed how we reference the element we have applied multicol to from multi-column or multicol element to multi-column or multicol container. Resolved: 22 November 2017
• Removed the example which stated "If a tall image is moved to a column on the next page to find room for it, its natural column may be left empty. If so, the column is still considered to have content for the purpose of deciding if the column rule should be drawn." Resolved: 7 September 2017

Changes from the Candidate Recommendation (CR) of 12 April 2011.

• Added July 2016 resolution to change the track size floor to a required UA-specified value, consistent with the CSS Grid spec. Resolved: 7 Jan 2016
• Remove the restriction about overflow columns only being in continuous media in the statement that 'column-fill' has no effect on overflow columns. Resolved: September 2013.
• Added keyword balance-all and examples to demonstrate how this should work. Resolved: September 2013.
• The pseudo-algorithm has been revised on a number of occasions. Latest change Feb 2013.
• Clarified that properties 'columns', 'column-width', 'column-count' "apply to block containers". Ref: Feb 2013.
• Breaking properties have been moved from this specification to the CSS Fragmentation Module.
• Change to 'column-fill' wording to clarify that 'column-fill' is honored before page breaks. Ref: Jan 2012.
• Amended example and text to clarify what happens with margin collapsing and spanning elements. Ref: Oct 2013.
• Clarification that 'column-rule-width' does not alter the size or placement of columns. Ref: Sep 2013.
• Added that each column spanning element establishes a separate BFC margins between them collapse. Ref: Dec 2011.
• Column rules are painted in the inline content layer, but below all inline content inside the multicol. Ref: Feb 2013.
• Clarify that 'column-span' causes the element to establish a formatting context even if it is not in a multicol.
• Column spanners do not always establish a block formatting context.
• Allow 'column-gap' to accept <> instead of just <>
• 'column-width' and 'column-count' applies to block containers except table wrapper boxes.
• Content that overflows columns is not clipped.

Privacy Considerations

Security Considerations

Accessibility Considerations

Acknowledgments