grid-row-gap

Published Jul 16, 2021Updated Sep 3, 2021
Contribute to Docs

A property that specifies the spacing between row 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

Rows separated by 4 pixels:

.content-a-container {
display: grid;
grid-auto-rows: 10%;
row-gap: 4px;
}

Example 2

A one percent spacing across grid row elements:

.content-b-container {
display: grid;
grid-template-rows: 10% 78% 10%;
row-gap: 1%;
}

All contributors

Looking to contribute?

Learn CSS on Codecademy