The column-gap CSS property sets the size of the gap (spacing) between an element's columns.

Syntax

/* Keyword value */
column-gap: normal; 

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

The column-gap property is specified as one of the values listed below.

Values

normal
The browser's default spacing is used between columns. The specification, which most modern browsers follow, recommends that this be equal to a length of 1em.
<length>
The size of the gap between columns, defined as a <length>. It must non-negative.
<percentage>
The size of the gap between columns, defined as a <percentage>. It must non-negative.

Formal syntax

normal | <length-percentage>

where
<length-percentage> = <length> | <percentage>

Example

HTML

<p class="content-box">
  This is some multi-column text with a 40px column
  gap created with the CSS `column-gap` property.
  Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: 40px;
}

Result

Specifications

Specification Status Comment
CSS Multi-column Layout Module
The definition of 'column-gap' in that specification.
Working Draft Initial definition.

Initial valuenormal
Applies tomulti-column elements, flex containers, grid containers
Inheritedno
Percentagesrefer to corresponding dimension of the content area
Mediavisual
Computed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typea length, percentage or calc();
Canonical orderper grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

50

Yes -webkit-

12

12 -webkit-

52

1.5 -moz- 1

10

11.1

15 -webkit-

3 -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes50

Yes

Yes -webkit-

52

4 -moz-

? ?5.0

1. Before Firefox 3, the default value for the normal keyword was 0 and not 1em.