grid-gap

Specifies the spacing between grid elements within a grid framework.

Syntax

.div-container {
grid-gap: <gap-value>;
}

where <gap-value> can be one of the following:

  • Grid keyword: normal
  • Pixel value: 3px
  • A percentage: 1%

Example 1

Columns with three pixels of spacing:

.content-a-container {
display: grid;
grid-template: 150px 300px 150px / 1fr 1fr 1fr;
grid-gap: 3px;
}

Example 2

A one percent spacing across grid elements:

.content-b-container {
display: grid;
grid-template: repeat(5, 19%) / auto 400px 400px auto;
grid-gap: 1%;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors