CSS grid-row-gap Property

Description

The grid-row-gap property determines the distance (gap) between the lines in the grid layout.

The CSS Grid Layout module initially defined the property as a grid-row-gap, later it is replaced by the row-gap property. However, to support a wider range of browsers that implemented the grid-row-gap property rather than row-gap, you should use the grid-row-gap property.

Initial value
normal
Applies to
Multi-column elements, flex containers, grid containers
Inherited
No
Media
Visual
Computed value
As specified
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.gridRowGap

Syntax

grid-row-gap: normal | <length-percentage>
where 
<length-percentage> = <length> | <percentage>

Values

  • normalThe default line spacing used by browsers. For a multi-column layout, this value corresponds to 1em , for all other types it is 0. This is the default value.
  • length / percentageSpecifies the spacing between lines using a valid length value, or a percentage value. The value must be positive.

Example

<div class="grid-container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="grid-container2">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
html, body {
   height: 100%; 
   margin: 0;
   overflow: auto; 
}
.grid-container,
.grid-container2 {
   display: grid;
   margin-top: 5px; 
   padding: 10px;
   background: rgb(0,150,208); 
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000;
   text-align: center; 
} 
.grid-container {
   grid-row-gap: 10px;
}
.grid-container2 {
   height: 50%;
   grid-row-gap: 20%;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????