row-gap CSS Property – How to Create Gaps between Rows

row-gap specifies the gap size between an element's rows.

note

A gap is sometimes called a gutter.

Example 1: Create Gaps between Grid Rows

CSS

section {
  display: grid;
  row-gap: 30px;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Try it on StackBlitz

The snippet above used the row-gap property to create a 30px gap between the grid container's rows.

CodeSweetly ads

Use Flexbox like a pro

Learn CSS Flexbox with live examples and images.

Check it out

Example 2: Create Gaps between Flex Rows

CSS

section {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  margin: 0 5px;
  padding: 30px;
  border-radius: 5px;
  flex-grow: 1;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</section>

Try it on StackBlitz

The snippet above used the row-gap property to create a 40px gap between the flex container's rows.

Overview

This article discussed what a CSS row-gap property is. We also used examples to see how it works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter