CSS column-gap Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

column-gap: 0;

column-gap: 20px;

column-gap: 10%;

column-gap: 2em;

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

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

Result

Editor

Browser Support

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

Desktop

12	1	1.5	11.1	3

Tablets / Mobile

18	4	11.1	2	1	4.4

Last updated by CSSPortal on: 1st January 2024

Support Us