CSS row-gap Property

What You’ll Learn

The row-gap property sets vertical space between rows in grid and flex layouts. It is cleaner than adding bottom margins to every child.

Introduction

The row-gap property in CSS is used to set the vertical spacing (gap) between rows in grid and flexbox layouts.

It is an essential property for controlling the layout and spacing of elements in a more manageable and visually appealing way.

Definition and Usage

Apply row-gap on the container, not on individual children. In CSS Grid, it adds space between horizontal grid tracks. In a flex column, it adds space between stacked items.

Pair row-gap with column-gap when you need different vertical and horizontal spacing, or use the gap shorthand when both axes should match.

📝 Syntax

The syntax for the row-gap property is straightforward. It can be applied to grid and flexbox containers to specify the space between rows.

container {
  row-gap: value;
}

Here, value can be any valid CSS length unit, such as px, em, rem, %, vh, vw, etc.

Basic Example

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 20px;
}

Syntax Rules

• Apply row-gap on the grid or flex container.
• Use length units like px or rem for predictable spacing.
• normal is the default and usually means no extra row gap.
• Percentages are relative to the container size in grid layouts.
• Combine with column-gap for separate horizontal spacing.
• Use gap: row column shorthand when both values are needed.

🎯 Default Value

The default value of the row-gap property is normal, which means the browser will use its default spacing. For grid layouts, this usually means no additional space between rows.

💎 Property Values

When Does row-gap Matter?

row-gap is the right tool when vertical rhythm needs to be consistent:

• Card grids — Separate rows of dashboard tiles without margin hacks.
• Form sections — Stack fields evenly in a flex column.
• Image galleries — Keep row breathing room in responsive grids.
• Design systems — Use rem gaps that scale with typography.

If both row and column spacing are equal, gap: 20px is shorter than setting each longhand separately.

Examples Gallery

Start with the reference grid, compare zero vs spaced rows, use flex columns, and scale gaps with rem.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
  }
</style>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

<style>
  .tight { row-gap: 0; }
  .spaced { row-gap: 24px; }
</style>

<style>
  .stack {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
  }
</style>

<style>
  .dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1.25rem;
  }
</style>

row-gap, column-gap, and gap

row-gap controls vertical spacing only. column-gap controls horizontal spacing. gap is the shorthand for both.

Example: gap: 24px 12px sets row-gap: 24px and column-gap: 12px.

.cards {
  display: grid;
  row-gap: 1.5rem;
  column-gap: 1rem;
}

💡 Best Practices