CSS column-gap

The column-gap property is used to specify the size of gaps between columns in a multi-column layout.

CSS

column-gap: value;

Column gaps may result in reduction in column width depending on the available space and values given to the column-count and column-widthproperties.

Values

normal : Specifies that the browser will determine column gap. This is the default value. A value of 1em is suggested by W3C.

<length> : Specifies the size of gaps between columns in px, em, rem, pt, etc.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

In the following demo, the number of columns into which the content of the paragraph is to be divided is set to 3. Since the column-gap property is set to normal, the column gap will depend upon the browser. Use the prefix -webkit-for browser support from Chrome, Safari and Opera, and -moz- for support from Firefox.

HTML

<p>Lorem ipsum ... lectus turpis.</p>

CSS

body {
  background-color: burlywood;
}

p {
  margin: 20px;
  padding: 10px;
  text-align: justify;
  background-color: white;
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;  
  -webkit-column-gap: normal; /* Chrome, Safari, Opera */
  -moz-column-gap: normal; /* Firefox */
  column-gap: normal;
}

See the Pen column-gap: normal by Aakhya Singh (@aakhya) on CodePen.

If the gap between the columns is increased while keeping the number of columns constant, then the column width will decrease. The following demo shows the output when the column width is set to 40px.

CSS

p {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;  
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
}

See the Pen column-gap: 40px by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.