row-gap

Overview

The row-gap property specifies the gap size, referred to as "gutter", between rows of an element. It applies to a variety of layouts, such as CSS Grid, Flexbox, and CSS Columns, making it a versatile tool for managing vertical spacing.

Note: The legacy property grid-row-gap is an alias for row-gap. For more information, you can check the CSS specification here.

Examples and Usage

Below, we'll observe the use of row-gap in both Grid and Flexbox layouts. While these examples have been simplified for demonstration purposes, real-world usage often involves specific dimensions according to design needs, more complex structures, and additional styling.

Grid Layout Example

The HTML structure is as follows:

<div class="grid-layout">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

The CSS styling applied to this structure is:

/* The parent container applies CSS Grid for layout */
.grid-layout {
  display: grid; /* Sets the layout to Grid */
  height: 300px; /* Defines the total height of the grid container */
  grid-template-columns: 200px; /* Defines a single column of 200px wide */
  grid-template-rows: repeat(4, 1fr); /* Defines 4 rows each sharing the available space */
  row-gap: 10px; /* Applies a 10px gap between each row */
}

/* Styles for each child div within the grid-layout container */
.grid-layout > div {
  background-color: #CD3333; /* background color for visibility */
  border: 1px solid black; /* Adds a black border to each grid item */
}

In this setup:

• The display: grid rule establishes a grid context for the container.

• The grid-template-columns and grid-template-rows properties define the structure of the grid, setting up a single column of 200px and four rows that share available space equally.

• Crucially, row-gap is used to insert a 10px gap between these rows.

The styles for child divs are mainly for visibility.

Flexbox Layout Example

Next, we'll apply row-gap in a Flexbox layout.

The HTML structure is as follows:

<div class="flex-layout">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

The CSS styling for this layout:

/* The parent container applies Flexbox for layout */
.flex-layout {
  display: flex; /* Sets the layout to Flexbox */
  flex-wrap: wrap; /* Allows flex items to wrap onto multiple lines */
  width: 400px; /* Defines the total width of the flex container */
  row-gap: 10px; /* Applies a 10px gap between each row */
}

/* Styles for each child div within the flex-layout container */
.flex-layout > div {
  background-color: #FBBF24; /* Sets a yellow background color for visibility */
  border: 1px solid black; /* Adds a black border to each flex item */
  flex: 1 1 auto; /* Allows the items to grow and shrink as needed */
  width: 150px; /* Specifies the base width of each flex item */
  height: 75px; /* Specifies the height of each flex item */
}

• The display: flex rule creates a flex context for the container.

• flex-wrap: wrap allows the items to wrap onto new lines if there isn't enough space in the container for them on a single line.

• Crucially, row-gap is used to create a 10px gap between rows.

• The flex: 1 1 auto rule in the child divs allows them to grow and shrink as needed based on the space available.

Like in the Grid example, the other styles for child divs enhance visibility.

Values

Note: row-gap defines a minimum spacing between items. Additional spacing may be added by the justify-content or align-content properties, which would effectively increase the size of the gutters. The specific handling of these properties varies by layout container as detailed in the specification.

Associated Properties

• column-gap
• gap

Tips and Tricks

• One way to ensure backward compatibility with older browser versions, is to use the legacy grid-row-gap property (or other legacy properties like grid-gap and grid-column-gap) before the row-gap property. This way, browsers that support the prefixed property will use it, while those that don't will move to the next declared property, i.e., row-gap.

• In a Flex Layout, remember that row-gap works in conjunction with flex-wrap. If flex-wrap is not set to wrap or wrap-reverse, row-gap will have no effect since there are no "rows" to apply the gap to.

• row-gap also works with CSS columns, so it can be used to manage spacing between columns of text in a multi-column layout.

• It's a good practice to use row-gap rather than margin to create gaps between rows. It's less prone to collapsing margin issues and makes the CSS code easier to understand and maintain.

Browser Compatibility

For a more detailed breakdown and nuances on support for Flex and Grid Layout in specific browser versions, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: row-gap

W3C's Editor's Draft of CSS Box Alignment Module Level 3: row-gap and column-gap

CSS Flexbox Explained