row-gap property

Description

CSS row-gap property represents the gap between two adjacent rows. We take an example of a grid that contains three grid items.

Syntax

row-gap : normal | length

Property values

normalDefault: It represents 0px gap between rows.; row-gap: normal;
Try it
length 30: length value adds respective gap between the rows. The following demo represents 30px gap between the rows.; row-gap: 30px;
Try it

Applicable to

It applies to multi-column containers, flex containers, grid containers.

Preview

Code

CSS

.element{
 display:grid;
 width:150px;
 height:150px;
 grid-template-rows:30% 1fr 40%;
 color:white;
}
.item1{
 background-color:red;
 grid-row:1/2;
}
.item2{
 background-color:green;
 grid-row:2/3;
}
.item3{
 background-color:blue;
 grid-row:3/4;
}

HTML

<div class="element">
<div class="item1">
			item1
		</div>
<div class="item2">
			item2
		</div>
<div class="item3">
			item3
		</div>
</div>