Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS grid-row-gap property
The CSS grid-row-gap property is used to set the gap (space) between grid rows in a CSS Grid container. This property allows you to control the vertical spacing between grid items, making your layout more visually appealing and easier to read.
Syntax
selector {
grid-row-gap: length;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines the gap size using units like px, em, rem, %, etc. |
0 |
Default value with no gap between rows |
Example
The following example demonstrates how to create a grid layout with a 20px gap between rows −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.ele {
background-color: orange;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<div class="container">
<div class="ele">1</div>
<div class="ele">2</div>
<div class="ele">3</div>
<div class="ele">4</div>
<div class="ele">5</div>
<div class="ele">6</div>
</div>
</body>
</html>
A grid layout with 6 orange numbered boxes arranged in 2 columns and 3 rows. Each box has a gray border and displays numbers 1-6. There is a 20px gap between each row, creating clear vertical separation between the grid items.
Browser Support
Note that grid-row-gap has been replaced by the shorthand row-gap property in modern CSS. While grid-row-gap still works for backward compatibility, it's recommended to use row-gap for new projects.
Conclusion
The grid-row-gap property provides precise control over vertical spacing in CSS Grid layouts. Use it to create visually balanced grid designs with consistent spacing between rows.
Updated on: 2026-03-15T12:56:44+05:30
97 Views
Advertisements