How CSS column-span: all Breaks Multi-Column Flow

The CSS column-span: all declaration allows a specific block-level element inside a multi-column container to span across all columns rather than being confined to a single column box. This article explains the mechanics behind this behavior, including how the browser partitions column sets, establishes layout boundaries, and flows surrounding text before and after the spanning element.

The Standard Multi-Column Flow

In a standard CSS Multi-column Layout created using column-count or column-width, the browser creates an anonymous set of column boxes. Child elements flow continuously through these boxes: when the first column fills to the specified height or breaks naturally, the content flows into the top of the next column, maintaining an uninterrupted thread.

The Interruption Caused by column-span: all

When an element inside this container is assigned column-span: all, the browser fundamentally alters the layout algorithm by splitting the multi-column formatting context.

Instead of treating the element as another piece of content within an individual column box, the browser executes the following steps:

  1. Terminates the Current Column Set: All content preceding the spanning element is balanced and laid out within the initial set of column boxes above the element.
  2. Expands to the Container Width: The spanning element is removed from the column box flow. Its width expands to fill the entire content box of the parent multi-column container, effectively breaking out of the column tracks.
  3. Creates a New Column Set: Content following the spanning element begins immediately beneath it in a brand-new set of column boxes, completely isolated from the column flow above.

Layout Partitioning

Because of this behavior, column-span: all behaves like a full-width divider that slices the multi-column container horizontally. The result is structured conceptually like this:

  • Top Section: Columns containing all content preceding the spanning element.
  • Middle Section: The spanning element, occupying 100% of the container's inline width.
  • Bottom Section: New columns containing all content following the spanning element.

The height of the preceding columns is resolved before the spanning element is placed. This prevents content after the spanning element from balancing backward into any remaining space in the columns above it.

Technical Constraints and Rules

  • Direct Children: The spanning behavior typically applies to block-level elements that are direct children of the multi-column container. If placed inside an inline element or deeply nested within nested blocks, the declaration may not take effect depending on browser support and layout constraints.
  • Binary Values: The CSS specification currently only supports two values for this property: none (the default) and all. Specifying a numerical span (such as spanning across two of three columns) is not valid CSS syntax.
  • Formatting Context: The spanning element creates a separate block-formatting boundary, ensuring that margins, paddings, and borders on the spanning element apply relative to the parent container's width, rather than an individual column track.