CSS row-gap Property

Description

The row-gap CSS property is used in conjunction with the CSS Grid Layout to control the spacing between rows within a grid container. It allows you to specify a fixed or relative gap between rows, helping to create consistent and visually appealing layouts. By setting the row-gap property, you can define the amount of space between grid rows, improving readability and aesthetics in web design. This property simplifies the management of row spacing, making it an essential tool for responsive and organized grid-based designs.

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

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

<div id="flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

Browser Support

The following table will show you the current browser support for the CSS row-gap property.

Desktop
Edge Chrome Firefox Opera Safari
1647523410.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
47523410.3547

Last updated by CSSPortal on: 3rd January 2024