We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

The column-gap CSS property sets the size of the gap (spacing) between an element's columns. Initially specified for Multi-column Layout, the column-gap property has been moved into the Box Alignment specification for use in several layout contexts.

CSS Grid Layout initially defined the grid-column-gap property. This prefixed property will be replaced by column-gap, however in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property as in the second interactive example above.

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 Box Alignment Module Level 3
The definition of 'column-gap' in that specification.
Working Draft Applies to grid and flexbox
CSS Grid Layout
The definition of 'column-gap' in that specification.
Candidate Recommendation Specifies how this property affects grid layouts
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.

See also