W3docs
en
Log in

CSS column-gap Property

The column-gap property sets the length of gap between columns. Learn about values and try examples.

The column-gap property sets the length of the gap between columns.

The column-gap property is one of the CSS3 properties.

It accepts a normal keyword or a <length> value. normal is the default. The gap can be specified in em, px, or percentages. The property also supports the standard initial and inherit keywords.

Info

Vendor prefixes are no longer required for modern browsers. Native support is available in all major browsers.

When a column-rule is used between columns, it will be in the middle of the gap.

Initial Valuenormal
Applies toMulti-column elements, flex containers, grid containers.
InheritedNo.
AnimatableYes. The length of the column gap is animatable.
VersionCSS3
DOM Syntaxobject.style.columnGap = "100px";

Syntax

Syntax of CSS column-gap Property

column-gap: length | normal | initial | inherit;

Example of the column-gap property:

Example of CSS column-gap Property with normal value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: normal;
      }
    </style>
  </head>
  <body>
    <h2>The column-gap property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS column-gap Property

Example of the column-gap property with the "length" value:

Example of CSS column-gap Property with length value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Column-gap property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
normalThe default gap size between columns.
lengthSpecifies the length that sets the gap between columns. Can be specified in em, px, or percentages.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What is the purpose of the column-gap property in CSS?