Skip to content
Latest: The updated version of the Creating NPM Package (React JavaScript) book is out

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

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

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.