`row-gap` CSS property

The row-gap CSS property sets the size of the gap (gutter) between an element's rows in multi-column, flexible box, and grid layouts.

Try it

row-gap: 0;

row-gap: 1ch;

row-gap: 1em;

row-gap: 20px;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntax

/* Keyword value */
row-gap: normal;

/* <length-percentage> value */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;
row-gap: 10%;
row-gap: calc(10% - 6px);

/* <line-width> values */
row-gap: thin;
row-gap: medium;
row-gap: thick;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

Values

This property is specified as a single value from the following list:

normal

For multi-column layout, resolves to 1em; otherwise 0. This is the default value.

<line-width>

Sets the size of the gap using the keywords thin, medium, or thick, or a positive <length> value.

<length-percentage>

Sets a non-negative <length> or <percentage> value. Percentages are relative to the block-size of the content box or 0.

Description

The row-gap property sets the size of the gap between an element's rows. This gap may contain a visible separator as a gap decoration. If there is a rule between rows, it will appear in the middle of the gap, but has no impact on the gap size. These decorative lines can be added to the otherwise "empty space" by using the row-rule property or rule shorthand.

Defined in CSS gaps, the property can be used in multi-column, flexible box, and grid layouts. The row-gap, along with the column-gap property, can also be set using the gap shorthand property, in that order. The row-gap property replaced the grid-row-gap property, which was limited to CSS grid layouts. Now grid-row-gap is an alias for row-gap.

The property specifies a fixed-length gutter between items in a container, separating boxes in the container's block axis. Negative values are invalid. The default value normal resolves to 1em on multi-column containers, and 0 everywhere else.

Percentages resolve against the content box size of the container element's block axis when this size is definite, against 0 otherwise, except in grid layout, for which cyclic percentage sizes resolve against zero for determining intrinsic size contributions but resolve against the element's content box when laying out the contents.

In grid layouts, the effect of the gap is as though the grid lines between grid rows acquired the thickness of the property's value: the grid track between two rows is the space between the gutters that represent them. When it comes to track sizing, each gutter is treated as an extra, empty, fixed-size track of the specified size, which is spanned by any grid items that spans across more than one row. While treated as empty for sizing, the gap created may contain a row-rule.

Formal definition

Formal syntax

row-gap = 
  normal |
  <length-percentage>

<length-percentage> = 
  <length> |
  <percentage>

Examples

Flex layout

This example demonstrates using the row-gap property to create horizontal space between adjacent rows of flex items. It also demonstrates how the row-gap size is not affected by the size of the row rule.

HTML

We include six items in a container element:

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

We set the display to flex, set the flex-flow to row wrap to create a flex container with rows of flex items that flow onto new lines as needed, and limit the width to 300px. We also add a row-rule, which will draw a 30px-wide, dashed, magenta line in the middle of the gap.

The row-gap value is set as 20px on the flex container to create a 20px gap between the adjacent flex rows.

We also set a background color on the flex items, with most being semi-opaque, to demonstrate how the rule is visible under the flex items when it is wider than the gap.

#flexbox {
  display: flex;
  flex-flow: row wrap;
  width: 300px;
  row-rule: 30px dashed magenta;

  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: #00ff0033;
  flex: 1 1 100px;
  height: 50px;
}
#flexbox > div:nth-of-type(3n-1) {
  background-color: lime;
}

Result

To set vertical space between flex items, specify a non-zero value for the column-gap property, optionally setting both row-gap and column-gap by using the gap shorthand.

Grid layout

This example demonstrates using the row-gap property with a <percentage> value in a grid layout.

HTML

We include five items in a container element:

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

We set the display property to grid, the height to 240px, the width to 350px and grid-template-rows to repeat(3, 1fr) to create a 350px-wide grid container with three columns and as many rows as needed. Each row is 100px tall, as defined by the grid-template-rows property.

The row-gap is set to 5%. The container height is 240px. The 5% value creates a row gap that is 12px tall, leaving 216px for three rows of grid items, meaning each row is 72px tall.

#grid {
  display: grid;
  height: 240px;
  width: 350px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 150px 1fr;

  row-gap: 5%;
}

body {
  padding: 1em;
}

#grid > div {
  outline: 1px solid green;
  background-color: lime;
}
@layer no-support {
  @supports not (row-gap: 5%) {
    body::before {
      content: "Your browser doesn't support percent values";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Result

Specifications

Browser compatibility

See also

• column-gap
• row-rule
• rule
• gap
• Basic concepts of grid layout: gutters
• CSS gaps module