'column-rule-width'

	Name: column-rule-width
	Value: <>
	Initial: medium
	Applies to: multicol containers
	Inherited: no
	Percentages: N/A
	Media: visual
	Computed value: absolute length; ''0'' if the column rule style is ''border-style/none'' or ''hidden''
	Animatable: as <>
	

'column-rule'

	Name: column-rule
	Value: <<'column-rule-width'>> || <<'column-rule-style'>> || <<'column-rule-color'>>
	Initial: see individual properties
	Applies to: see individual properties
	Inherited: see individual properties
	Percentages: see individual properties
	Media: see individual properties
	Computed value: see individual properties
	Animatable: see individual properties
	

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

Column breaks

'break-before', 'break-after', 'break-inside'

Spanning columns

'column-span'

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

none

The element does not span multiple columns.

all

The element spans 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 before the element appears. The element establishes a new formatting context. Note: Whether the element establishes a new formatting context does not depend on whether the element is a descendent 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.

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

		h2 {
			margin: 0.5em 0;
			column-span: all;
			background: silver
		}
		p { margin-top: 1em }
		

Filling columns

'column-fill'

	Name: column-fill
	Value: auto | balance | balance-all
	Initial: balance
	Applies to: multicol containers
	Inherited: no
	Percentages: N/A
	Media: see below
	Computed value: specified value
	

balance

Balance content equally between columns, as far as possible. In paged media, only the last page is balanced.

balance-all

Balance content equally between columns, as far as possible. In paged media, all pages are balanced.

auto

fill columns sequentially

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

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

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

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

Overflow

Overflow inside multicol containers

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 media, and additional column boxes are moved to the next page(s) for paged media.

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

		p {
			break-after: column;
		}
		

Appendix B. Changes

Changes from the Working Draft (WD) of 5 October 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 the track size floor to a required UA-specified value, consistent with the CSS Grid spec.
• 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 beeen 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.

Acknowledgments