CSS grid-row-gap Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The grid-row-gap property in CSS is used to set the size of the gap (gutter) between rows in a grid layout.

This property is essential for creating space between grid items, making the layout more readable and visually appealing. While grid-row-gap has been deprecated in favor of the row-gap property, it is still widely supported and useful for understanding historical CSS practices.

💡 Syntax

The syntax for the grid-row-gap property is simple. You can specify the gap size using any valid CSS length unit, such as px, em, %, etc.

Syntax

Copied

element {
  grid-row-gap: length;
}

Here, length can be a fixed size (e.g., 20px), a relative size (e.g., 1em), or a percentage.

🎛️ Default Value

The default value of the grid-row-gap property is 0, meaning there is no gap between the rows unless explicitly set.

🏠 Property Values

Value	Description
length	A fixed or relative length value, such as 10px, 1em, 5%, etc.

📄 Example

In this example, we'll create a simple grid with a row gap of 20px.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS grid-row-gap Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-row-gap: 20px;
    }
    .grid-item {
      background-color: #ccc;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Grid with Row Gap</h1>
  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The grid-row-gap property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, for future-proofing your code, it is recommended to use the row-gap property instead, as it serves the same purpose and is the current standard.

🎉 Conclusion

The grid-row-gap property is a useful tool for creating space between rows in a CSS grid layout.

Although it has been replaced by the row-gap property in modern CSS, understanding how to use grid-row-gap is still beneficial, especially when working with older codebases. Experiment with different gap sizes to see how they can improve the layout and readability of your grid designs.