The column-span property controls whether a block-level element inside a multi-column container breaks out of the column flow and is laid out across the full width of the container. In practice, when applied to an element it interrupts the columnized flow: the element is taken out of the column-balancing algorithm and rendered spanning the container instead of being confined to a single column track. This behavior typically produces a forced break before and after the spanning element so that the multi-column text resumes cleanly below it.

Because column-span changes how content participates in the multi-column formatting context, it interacts closely with the container’s column setup and break rules. It is meaningful only when there is an active multi-column environment created by properties such as column-count or column-width, and the visual result depends on spacing set by column-gap. Authors should also consider how it relates to fragmentation rules like break-inside, because spanning an element effectively forces fragmentation at that point in the flow and can influence where breaks occur in surrounding content.

Common use cases are headings, images, tables, or other elements that need to be shown full-width within an otherwise multi-column article - for example, a full-width title before a new section or a wide figure that should not be split across columns. When deciding to use this property, weigh its effect on readability and vertical rhythm: spanning elements can create larger vertical gaps and change column balance. If full-width layout control is needed across different screen sizes or more complex arrangements are required, authors often consider layout alternatives such as using display-based layout systems (Grid or Flexbox) to manage column-like behavior while retaining more predictable control over placement and wrapping.