In this section, we will learn what column-gap property is and how to use it in CSS.

Click here to run the example of column-gap property.

CSS column-gap Property Definition and Usage

The CSS `column-gap` property is used to set a gap between columns that are created via the `column-count` property.

For example, if we set the value of this property to 10px, that means the distance between each column should be 10px wide.

CSS column-gap Property Syntax

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

CSS column-gap Property Value

The value of this property is a number with a CSS supported unit.

normal: this is default value and if used, browsers will set a normal distance between each column. This value is roughly equal to 1em.

The two global values, “initial” and “inherit” can also be used for this property.

Example: column-gap property in CSS

See the Pen column-gap property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS column-gap Property Work?

The value for this `column-gap` in this example is set to 40px, and that means the distance between each column is equal to 40px now.