CSS row-gap Property

The row-gap property specifies the space between rows.

The gap value can be any length value, including percentages.

This property is used by flexbox and grid layout systems.

Example

#

A flex layout with a row-gap of 25 pixels.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .flex {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 25px;
  }

  .flex > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    width: 100px;
  }
</style>

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>          

Syntax

row-gap: length | normal | initial | inherit;

Values

#

Value Description
length Row gap width any length value or percentage.
normal Default. Sets a normal row gap, which is 1em.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see different row-gap values.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.flex-row-gap {
  background-color: #776fac;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  row-gap: normal;
}

.flex-row-gap > div {
  background-color: aliceblue;
  margin: 5px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  width: 100px;
}
</style>

<div class="flex-row-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>          

Browser support

This table shows when row-gap support started for each browser.

Chrome
50.0 Apr 2016
Firefox
52.0 Mar 2017
IE/Edge
10.0 Sep 2012
Opera
37.0 May 2016
Safari
9.0 Sep 2015

You may also like

Guides