CSS row-gap Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The row-gap property defines the amount of empty space inserted between successive row tracks in a layout. In practical terms it controls the vertical gutters that separate horizontal tracks created by a grid or by multi-line flex layouts; it only affects the spacing between rows, not the internal padding or margins of the grid/flex items themselves. Because the gap it creates sits between tracks, it does not change the intrinsic size of any individual item — it changes the distance the layout engine leaves between those items.

In a grid context, row-gap is applied between grid rows whether those rows are created explicitly (via something like grid-template-rows) or implicitly (auto-placed rows). The property influences the visual separation and can affect how content flows when you have fixed or flexible row track sizing: adding more gap increases the overall height of the grid’s content area even though individual row definitions remain the same. Gaps are part of the grid’s track sizing model and do not collapse with item margins, so you won’t get margin-collapsing behavior between rows.

When used with multi-line flex containers, row-gap takes effect only when the flex items wrap to form multiple lines (i.e., the flex container is using wrapping). In that case the value sets the spacing between flex lines rather than between individual items within the same line. For two-dimensional spacing it is commonly used alongside column-gap, or via the single shorthand gap, to separately control horizontal and vertical gutters.

Considerations when using row-gap include its interaction with backgrounds and alignment: backgrounds applied to the container will span across the gap while backgrounds on individual items will not, and alignment of items within rows is handled independently of the gap size. It is also useful for creating consistent vertical rhythm without having to manage per-item margins, and it works predictably across explicit and implicit rows so long as you account for the extra space it adds to the overall layout.

Definition

Initial value: normal
Applies to: multi-column elements, flex containers, grid containers
Inherited: no
Computed value: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.rowGap

Interactive Demo

row-gap: 0;

row-gap: 1ch;

row-gap: 1em;

row-gap: 20px;

One

Two

Three

Four

Five

Syntax

row-gap: normal | <length>

Values

normalDefault value. Specifies a normal gap between the rows
<length>Is the width of the gutter separating the rows. <percentage> values are relative to the dimension of the element.

Example

HTML

<body>

  <h2>Grid with row-gap</h2>

  <div class="grid">

    <div class="item">Item 1</div>

    <div class="item">Item 2</div>

    <div class="item">Item 3</div>

    <div class="item">Item 4</div>

    <div class="item">Item 5</div>

    <div class="item">Item 6</div>

  </div>

</body>

CSS

/* Example: using row-gap to add vertical spacing between grid rows */
body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background: #f7f7f9;
}

h2 {
  margin-bottom: 12px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
  column-gap: 12px;
  background: #ffffff;
  padding: 12px;
  border-radius: 6px;
}

.item {
  background: linear-gradient(180deg, #e6f4ff, #d6ecff);
  border: 1px solid #cfe8ff;
  padding: 16px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS row-gap property. Hover over a browser icon to see the version that first introduced support for this CSS property.