🎯 CSS grid-row-gap Property

The grid-row-gap property is a CSS Grid feature that defines the vertical spacing between rows inside a grid container.

It allows developers to control how much space appears between rows, helping create cleaner, more organized, and easier-to-read layouts.

Defines the vertical gap between rows using units such as px, rem, em, or percentages.

.container {
    grid-row-gap: 15px;
}
                

This example creates a 15px vertical gap between each row in the grid layout.

.container {
    grid-row-gap: 1rem;
}

.container {
    grid-row-gap: 10%;
}
                

Different CSS units can be used depending on the design requirements of the project.

Resets the property to its default browser value.

.container {
    grid-row-gap: initial;
}
                

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 20px;
}
                

In this example, every row inside the grid container is separated by a 20px vertical gap.