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
- HTML
section {
display: grid;
row-gap: 30px;
background-color: orange;
margin: 10px;
padding: 7px;
}
div {
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
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
- HTML
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;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</section>
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.