CSS Reference Property

column-gap

The column-gap property is used to specify the amount of space between adjacent columns in a multi-column layout. It specifies the space—or gap—between columns belonging to the same multi-column element.

Trivia & Notes

The height of the column gap is the same height as the height of the columns.

If there is a column rule between columns (which is a line drawn between the columns to set them apart visually), the rule is drawn in the middle of the gap, and it does not take up any space, which means that it will not add to the amount of space between columns specified using column-gap.

If the width and count of columns do not fit into the width of the element, the browser will make necessary adjustments and may reduce the column count to fit the specified column widths into the element. The column gap may also result in narrowing columns down, depending on the amount of space available.

Official Syntax

  • Syntax:

    column-gap: <length> | normal
  • Initial: normal
  • Applies To: multi-column elements
  • Animatable: yes, as a length

Values

<length>
The space between adjacent columns in a multi-column element is set to the given value. See the <length> entry for a list of possible vales. Negative values are not allowed.
normal
The default value. This value is user-agent specific. A value of 1em is suggested by the specification.

Examples

The following will create a three-column layout inside an element, and sets the space between them using the column-gap property.

.mag {
    columns: 30% 3;
    column-gap: 1.5em;
}
                

The following are all valid column-gap values:

column-gap: 3em;
column-gap: 20px;
column-gap: 10%;
column-gap: 2pt;
/* ... any length value is allowed as long as it's not negative ... */
                

Live Demo

In the following demo, the columns property is used to create a multi-column layout on an element. Change the value of the column-gap property to see how the space between the columns changes, and how the widths of the columns adjust.

View this demo on the Codrops Playground

Browser Support

CSS3 Multiple column layout

Method of flowing information in multiple columns

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 50
  • 52
  • 10
  • 37
  • 9

Mobile / Tablet

  • 9.0
  • 56
  • all
  • 59
  • 54

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:24 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.