CSS column-span Property


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
Applies to
Block-level elements, except floating and absolutely positioned elements
Computed value
As specified
JavaScript syntax

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.
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.


column-span: none | all


  • 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.


<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>
.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; 

Browser Support

The following table will show you the current browser support for the CSS column-span property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024