Skip to main content

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

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

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

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

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;
}

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.