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

row-gap specifies the gap sizes between a multi-column, grid, or flexbox container’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.

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.