The Tech Platform
Nov 23, 20211 min
The row-gap property specifies the gap between the grid rows. The row-gap property was formerly known as grid-row-gap.
Syntax:
row-gap: length | normal | initial | inherit;
Where,
length: A specified length or % that will set the gap between the rows
normal: Default value. Specifies a normal gap between the rows
Initial: Sets this property to its default value.
Inherit: Inherits this property from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
row-gap: 20px;
}
.grid-container > div {
border: 1px solid black;
background-color: pink;
}
</style>
</head>
<body>
<h2>Row-Gap Property</h2>
<p>The row-gap property defines the gap between the grid rows:</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
Output:
The Tech Platform