CSS grid-column-gap Property

CSS grid-column-gap property specifies the gap between the columns in the grid layout.

By default, there is no gap between the grid columns.

The column gap can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It also accepts a percentage(%) value.

In the example below, we have set a gap of 40px between the grid columns. Try it out:

Example:

.grid-container{
  display: grid;
  grid-column-gap: 40px;
}

Set a gap of 3rem between the grid columns:

Example:

.grid-container{
  display: grid;
  grid-column-gap: 3rem;
}

CSS Syntax

The grid-column-gap property has the following syntax:

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

Property Values

The grid-column-gap property accepts the following values:

lengthSpecifies the gap between the grid columns in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It also accepts a percentage(%) value. The default value is 0.
initialSets the grid-column-gap property to its default value(0).
inheritInherits the grid-column-gap property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.gridColumnGap = “40px”