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

row-gap: 0;

row-gap: 1ch;

row-gap: 1em;

row-gap: 20px;

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
16	47	52	34	10.1

Tablets / Mobile
47	52	34	10.3	5	47

Last updated by CSSPortal on: 3rd January 2024