CSS column-span Property

Description

The column-span CSS property is used to control how a multi-column layout treats elements that span multiple columns. When applied to an element, such as a heading or an image, it determines whether that element should span across all columns in the layout or only within its own column. By setting column-span to all, the element will break out of its column and span across all columns, creating a visually distinct effect. This property is particularly useful in creating newspaper-style layouts or designs where you want certain elements to stand out and break the flow of the columns. However, it's important to note that browser support for this property may vary, so it's advisable to check compatibility when using it in web development.

Initial value: none
Applies to: Block-level elements, except floating and absolutely positioned elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.columnSpan

Interactive Demo

column-span: none;

column-span: all;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

ColumnSpan

A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

column-span: none | all

Values

noneThe element does not span multiple columns.
allThe element spans across all columns. 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 block formatting context.

Example

HTML

<div class="book"> <h1>Lorem Ipsum Example Text Header</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

CSS

.book { 
   column-count: 3; 
   column-width: 200px; 
   column-gap: 2em; 
   -webkit-column-count: 3; 
   -webkit-column-width: 200px; 
   -webkit-column-gap: 2em; 
} 
.book h1 { 
   column-span: all; 
   -webkit-column-span: all; 
}

Result

Editor