CSS Row-Gap Manage Space Between Rows

CSS row-gap property helps manage space between rows in flex and grid containers.

It accepts lengths, percentages, and global keywords for flexibility.

Understanding `row-gap` in CSS

The row-gap property in CSS helps you control the space between rows in flex and grid containers. It’s great for keeping your layouts clean and organized. Let’s dive into some examples.

Example: Using `row-gap` in Flexbox

HTML

<div class="flex-row-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>

CSS

.flex-row-gap {
  background-color: #776fac;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 25px;
}

.flex-row-gap > div {
  background-color: aliceblue;
  margin: 5px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  width: 100px;
}

Result

In this example, row-gap: 25px creates a 25-pixel gap between each row of items. This helps maintain consistent spacing and makes the layout look neat.

Example: Using `row-gap` in Grid Layout

HTML

<div class="grid-row-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

CSS

.grid-row-gap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: 25px;
  height: 300px;
}

.grid-row-gap > div {
  background-color: aliceblue;
  border: 1px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

Result

In this grid example, row-gap: 25px creates a 25-pixel gap between each row. This keeps the grid items evenly spaced and visually appealing.

Interactive Example: Changing `row-gap` Values

HTML

<div class="flex-row-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>

<button onclick="changeRowGap('50px')">Set row-gap to 50px</button>
<button onclick="changeRowGap('normal')">Set row-gap to normal</button>
<button onclick="changeRowGap('initial')">Set row-gap to initial</button>
<button onclick="changeRowGap('inherit')">Set row-gap to inherit</button>

CSS

.flex-row-gap {
  background-color: #776fac;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  row-gap: normal;
}

.flex-row-gap > div {
  background-color: aliceblue;
  margin: 5px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  width: 100px;
}

JavaScript

function changeRowGap(value) {
  document.querySelector('.flex-row-gap').style.rowGap = value;
}

Result

In this interactive example, you can change the row-gap value by clicking the buttons. This helps you see how different row-gap values affect the layout.

Browser Compatibility

The row-gap property is widely supported across modern browsers, making it a reliable choice for web developers. Here’s a quick overview:

Browser	Initial Support
Chrome	50.0 (Apr 2016)
Firefox	52.0 (Mar 2017)
IE/Edge	10.0 (Sep 2012)
Opera	37.0 (May 2016)
Safari	9.0 (Sep 2015)

column-gap Property: Learn how to manage the space between columns.
gap Property: Discover how to set both row and column gaps in one declaration.
CSS Flexbox Tutorial: Dive into flexbox layouts.
CSS Grid Layout Tutorial: Explore grid layouts.
HTML Tutorial: Brush up on your HTML skills.

These resources will help you create more sophisticated and visually appealing web designs.