CssHow-ToBeginner · 3 min read

How to Use row-gap and column-gap in CSS for Spacing

Use the row-gap property to set vertical space between rows and column-gap to set horizontal space between columns in CSS grid or flex containers. These properties help create consistent gaps without extra margins or padding.

📐

Syntax

The row-gap property sets the space between rows, while column-gap sets the space between columns in a container. Both accept length values like px, rem, or percentages.

Example:

row-gap: 20px; adds 20 pixels of vertical space between rows.
column-gap: 15px; adds 15 pixels of horizontal space between columns.

css

.container {
  display: grid; /* or flex */
  row-gap: 20px;
  column-gap: 15px;
}

💻

Example

This example shows a grid container with three columns and two rows. The row-gap adds vertical space between the rows, and column-gap adds horizontal space between the columns.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Row-gap and Column-gap Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    column-gap: 30px;
    background-color: #f0f0f0;
    padding: 10px;
  }
  .grid-item {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 1.2rem;
    border-radius: 5px;
  }
</style>
</head>
<body>
  <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 class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
  </div>
</body>
</html>

Output

A grid with 3 columns and 2 rows of green boxes labeled Item 1 to Item 6, spaced with 20px vertical gaps and 30px horizontal gaps on a light gray background.

⚠️

Common Pitfalls

One common mistake is using row-gap and column-gap on containers without display: grid or display: flex. These properties only work on grid or flex containers.

Another pitfall is confusing gap with margins. gap controls space between items without extra margin on the edges.

css

/* Wrong: gap properties on block container */
.container {
  row-gap: 20px;
  column-gap: 20px;
}

/* Right: add display grid or flex */
.container {
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
}

📊

Quick Reference

Property	Description	Example Value
row-gap	Sets vertical space between rows	20px, 1rem, 5%
column-gap	Sets horizontal space between columns	15px, 0.5rem, 2%
gap	Shorthand for row-gap and column-gap	10px 20px (row-gap column-gap)

✅

Key Takeaways

Use row-gap to control vertical spacing and column-gap for horizontal spacing in grid or flex containers.

These properties only work when the container has display set to grid or flex.

gap is a shorthand to set both row-gap and column-gap at once.

Using gap properties avoids extra margins and keeps spacing consistent.

Values can be any CSS length unit like px, rem, or percentages.