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

HTML

<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>

CSS

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%;
}

Result

Browser Support

Desktop

?	?	?	?	?	?

Tablets / Mobile

?	?	?	?	?	?

Last updated by CSSPortal on: 6th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu