CSS grid-gap Property

CSS grid-gap property is used to set the gap between rows and columns in a grid layout. It is a shorthand of below two properties:

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

The example below sets a gap of 20px between the grid rows and a gap of 40px between the grid columns. Try it out:

Example:

.grid-container{
  grid-gap: 20px 40px;
}

If we want to keep both rows and columns gap equal, we can pass a single value to the grid-gap property. No need to pass the same value twice. See the example below:

Example:

.grid-container{
  grid-gap: 20px;
}

CSS Syntax

The grid-gap property has the following syntax:

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

Property Values

The grid-gap property accepts the following values:

grid-row-gapDefines the gap between the grid rows. The default value is 0.
grid-column-gapDefines the gap between the grid columns. The default value is 0.
initialSets the grid-gap property to its default value.
inheritInherits the grid-gap property from the parent element.

General Info

Default Value0 0
InheritedNo
JavaScript Usageelement.style.gridGap = “20px 40px”