CSS grid - row-gap

CSS row-gap property defines the size of the gap between rows.

To ensure compatibility with legacy websites, the gap property in CSS Grid was initially named grid-row-gap, and browsers will still accept grid-row-gap as an alias for row-gap.

Possible Values

  • <length-percentage> − The percentage value for row-gap determines the width of the gap between rows in a grid, relative to the height of the grid container.

Applies to

Multi-column elements, flex containers, grid containers.

DOM Syntax

object.style.rowGap = "<length>|<percentage>";

CSS row-gap - <length>

The following example demonstrates that row-gap: 30px property adds the 30px gap between rows in the grid layout −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      row-gap: 30px;
      color: white;
      text-align: center;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid blue;
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS row-gap - <percentage>

The following example demonstrates that row-gap: 40% property adds the 40% gap between rows in the grid layout −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      row-gap: 40%;
   }
   .grid-container > div {
      background-color: red;
      color: white;
      padding: 10px;
      border: 2px solid blue;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
      <div>Item 6</div>
   </div>
</body>
</html>

CSS row-gap - Flex Layout

The following example demonstrates how to use row-gap property is used to add a row gap between adjacent flex items.

  • The display: flex and flex-flow: wrap property is used to create a flex container. If the items do not fit within the container's width, they will move to the next row.

  • The flex: 1 1 auto property allows the flex items to grow or shrink as needed.

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-wrap: wrap;
      width: 250px;
      row-gap: 20px;
   }
   .flex-container > div {
      border: 2px solid red;
      background-color: pink;
      flex: 1 1 auto;
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
      <div>Flex Item 4</div>
      <div>Flex Item 5</div>
   </div>
</body>
</html>

CSS column-gap - Grid Layout

The following example demonstrates that the row-gap: 30px property adds 30px vertical space between the grid items −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      height: 150px;
      grid-template-columns: 100px 1fr;
      grid-template-rows: repeat(3, 1fr);
      row-gap: 30px;
   }
   .grid-container > div {
      border: 2px solid red;
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
      <div>Flex Item 4</div>
      <div>Flex Item 5</div>
   </div>
</body>
</html>
Advertisements