'column-span'

	Name: column-span
	Value: none | <> | all | auto
	Initial: none
	Applies to: [=in-flow=] block-level elements
	Inherited: no
	Percentages: N/A
	Computed value: specified value
	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 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 ''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 multicol-span-float-004.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-dynamic-add-014.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-020.html multicol-span-all-rule-001.html multicol-span-all-rule-002.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 multicol-span-auto-size-in-vertical-writing-mode-001.html multicol-span-auto-size-in-vertical-writing-mode-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

<>

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. Issue: 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?

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-030.html multicol-fill-balance-031.html multicol-fill-balance-032.html multicol-fill-balance-033.html multicol-fill-balance-034.html multicol-fill-balance-035.html multicol-fill-balance-036.html multicol-fill-balance-037.html multicol-fill-balance-038.html multicol-fill-balance-039.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 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.

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

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 ''border-style/none'' or ''border-style/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

Security Considerations

Accessibility Considerations

Acknowledgments