The grid-row-gap property in CSS is used to define the size of the gap between the grid elements. The user can specify the width of the gap separating the rows by providing a value to the grid-row-gap.
Syntax:
grid-row-gap: length | percentage | global-values;
Property Values:
- length: The user can set the grid-row-gap value to be fixed length measured in px, cm etc.
- global-value: This property is used to set the grid-row-gap value in the form of some fixed terms which includes inherit, initial.
- percentage (%): This property is used to set grid-row-gap value in the form of percentage, where percentage values are relative to the dimension of the element.
Example: In this example, we are using the above-explained property.
html
<!DOCTYPE html><html>
<head>
<title>
CSS grid-row-gap Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 20px;
grid-column-gap: 20px;
background-color: green;
padding: 30px;
}
.main>div {
background-color: white;
text-align: center;
padding: 15px;
font-size: 25px;
}
</style>
</head>
<body>
<div class="main">
<div>G</div>
<div>E</div>
<div>E</div>
<div>K</div>
<div>S</div>
</div>
</body>
</html>
|
Output:
Example:
html
<!DOCTYPE html><html>
<head>
<title>
CSS grid-row-gap Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 20%;
grid-column-gap: 2%;
background-color: green;
padding: 30px;
}
.main>div {
background-color: white;
text-align: center;
padding: 15px;
font-size: 25px;
}
</style>
</head>
<body>
<div class="main">
<div>G</div>
<div>E</div>
<div>E</div>
<div>K</div>
<div>S</div>
</div>
</body>
</html>
|
Output:
Example:
html
<!DOCTYPE html><html>
<head>
<title>
CSS grid-row-gap Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: initial;
grid-column-gap: 20px;
background-color: green;
padding: 30px;
}
.main>div {
background-color: white;
text-align: center;
padding: 15px;
font-size: 25px;
}
</style>
</head>
<body>
<div class="main">
<div>G</div>
<div>E</div>
<div>E</div>
<div>K</div>
<div>S</div>
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by CSS grid-row-gap Property are listed below:
- Google Chrome 47.0 and above
- Edge 16.0 and above
- Firefox 52.0 and above
- Safari 10.1 and above
- Opera 34.0 and above