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

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

CSS grid-column-gap Property Definition and Usage

When we create a grid on a page, by default, each column sits next to its neighbor column without any gap in between. But this is the default behavior and, like many other features, this one is also changeable.

Basically, with the help of CSS `grid-column-gap` property, we can set a gap between each column of a grid if needed.

CSS grid-column-gap Property Syntax

grid-column-gap: length;

CSS grid-column-gap Property Value

The value we set for this property could be any number with relative or absolute units supported in CSS.

Example: grid-column-gap property in CSS

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

How Does CSS grid-column-gap Property Work?

As you can see, in this example, the value of the `grid-column-gap` property is set to 40px. This means now between each column in the grid there’s a gap of 40px.