CSS grid-row-gap Property

What You’ll Learn

The grid-row-gap property controls the vertical space between rows in a CSS grid layout.

Introduction

The grid-row-gap property in CSS is used to set the size of the gap (gutter) between rows in a grid layout. This property is essential for creating space between grid items, making the layout more readable and visually appealing.

Definition and Usage

Set grid-row-gap on a grid container with display: grid. It adds space only between row tracks, not on the outer top or bottom edges of the grid. While grid-row-gap has been superseded by the row-gap property in modern CSS, it is still widely supported and useful when reading older codebases.

📝 Syntax

The syntax for the grid-row-gap property is simple. You can specify the gap size using any valid CSS length unit, such as px, em, %, or rem:

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

Here, length can be a fixed size (e.g., 20px), a relative size (e.g., 1em), or a percentage.

Basic Example

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

Default Value

The default value of the grid-row-gap property is 0, meaning there is no gap between the rows unless explicitly set.

Syntax Rules

• Applies to grid containers only, not individual grid items.
• Accepts length and percentage values.
• Legacy alias of row-gap in grid layouts.
• The property is not inherited.
• Gap appears only between rows, not on the container edges.

💎 Property Values

Examples Gallery

Add 20 pixels of row gap, compare with no gap, try rem units, and combine with column gap for asymmetric spacing.

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

.no-gap { grid-row-gap: 0; }
.with-gap { grid-row-gap: 24px; }

.grid-container {
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 1.5rem;
}

.card-grid {
  grid-row-gap: 24px;
  grid-column-gap: 12px;
}

♿ Accessibility

• Use adequate gap so clickable items are not too close together on touch screens.
• Prefer rem units so spacing scales with user font preferences.
• Do not rely on gap alone for visual grouping; use headings and landmarks.
• Test zoom levels to ensure gaps remain readable at 200% zoom.
• Keep contrast between items and background clear even with spacing.

💡 Best Practices