CSS column-gap Property

Description

The column-gap CSS property is used to control the spacing between columns in a multi-column layout. It allows web developers to specify the width of the gap or space between adjacent columns within an element, such as a container with text or other content. By setting the column-gap property, designers can achieve better control over the layout's aesthetics and readability, ensuring that content flows smoothly and legibly across columns while maintaining a consistent gap between them. This property is particularly useful for creating newspaper-style layouts or organizing content in a magazine-like format on a webpage.

Initial value
normal
Applies to
multi-column elements, flex containers, grid containers
Inherited
no
Computed value
as specified
Animatable
a length, percentage or calc();
JavaScript syntax
object.style.columnGap

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.

Syntax

column-gap: normal | <length> | <percentage>

Values

  • normalThe browsers default spacing is used between columns. For multi-column layout this is specified as 1em. For all other layout types it is 0.
  • <length>The size of the gap between columns, defined as a <length>. The <length> property value must be non-negative.
  • <percentage>The size of the gap between columns, defined as a <percentage>. The <percentage> property value must be non-negative.

Example

<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; 
} 
.book h1 { 
   column-span: all; 
} 

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
1211.511.13
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18411.1214.4

Last updated by CSSPortal on: 1st January 2024