Last Updated: 

Changing Space Between Grid Rows in HTML and CSS

In modern web design, CSS Grid Layout has revolutionized the way we create complex and responsive layouts. One of the important aspects of working with CSS Grid is controlling the space between grid rows. This allows designers to create visually appealing and well-organized web pages. In this blog post, we will explore the fundamental concepts, usage methods, common practices, and best practices for changing the space between grid rows in HTML and CSS.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts#

CSS Grid Basics#

CSS Grid is a two-dimensional layout model that allows you to create rows and columns on a web page. A grid container is an HTML element with the display property set to grid or inline - grid. Inside the grid container, you can place grid items.

Row Gap#

The row - gap property is used to set the space between grid rows. It defines the size of the gutter (space) between each row in the grid. In older browsers, the grid - row - gap property was used, but the row - gap is now the standardized and more widely supported version.

Global and Local Gaps#

You can set a global gap for both rows and columns using the gap property. The gap property is a shorthand for row - gap and column - gap. If you only want to set the gap for rows, you use the row - gap property.

Usage Methods#

Using the row - gap Property#

The row - gap property takes a length value (such as pixels, ems, rems) or a percentage. Here is a simple example:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <style>
        .grid - container {
            display: grid;
            grid-template - rows: repeat(3, 1fr);
            row - gap: 20px;
        }
 
       .grid - item {
            background - color: lightblue;
            padding: 20px;
        }
    </style>
</head>
 
<body>
    <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>
</body>
 
</html>

In this example, we have a grid container with three rows. The row - gap property is set to 20px, which means there will be a 20 - pixel space between each row.

Using the gap Shorthand Property#

The gap property can be used to set both the row and column gaps at the same time. If you provide a single value, it will be used for both rows and columns. If you provide two values, the first value is for the row gap and the second is for the column gap.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <style>
        .grid - container {
            display: grid;
            grid-template - rows: repeat(3, 1fr);
            grid-template - columns: repeat(2, 1fr);
            gap: 20px 10px;
        }
 
       .grid - item {
            background - color: lightgreen;
            padding: 20px;
        }
    </style>
</head>
 
<body>
    <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>

In this example, the gap property is set to 20px 10px, which means there will be a 20 - pixel gap between rows and a 10 - pixel gap between columns.

Common Practices#

Responsive Row Gaps#

You can use media queries to make the row gap responsive. For example, you might want a larger gap on desktop devices and a smaller gap on mobile devices.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <style>
        .grid - container {
            display: grid;
            grid-template - rows: repeat(3, 1fr);
            row - gap: 10px;
        }
 
       .grid - item {
            background - color: lightcoral;
            padding: 20px;
        }
 
        @media (min - width: 768px) {
           .grid - container {
                row - gap: 20px;
            }
        }
    </style>
</head>
 
<body>
    <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>
</body>
 
</html>

In this example, on screens smaller than 768 pixels, the row gap is set to 10 pixels. On screens 768 pixels and larger, the row gap is set to 20 pixels.

Using Relative Units#

Using relative units like em or rem for the row gap can make your layout more flexible. For example, if you set the row - gap to 1em, the gap will be relative to the font-size of the element.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <style>
        .grid - container {
            display: grid;
            grid-template - rows: repeat(3, 1fr);
            row - gap: 1em;
            font - size: 16px;
        }
 
       .grid - item {
            background - color: lightyellow;
            padding: 20px;
        }
    </style>
</head>
 
<body>
    <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>
</body>
 
</html>

Best Practices#

Consistency#

Maintain consistency in the row gap throughout your website. This will create a more professional and polished look. For example, if you use a 20 - pixel row gap on one page, try to use the same gap on other pages with similar layouts.

Accessibility#

Make sure that the row gap is large enough to ensure good readability and usability. A small row gap can make the content look cluttered and difficult to read, especially for users with visual impairments.

Testing#

Test your layout on different devices and browsers to ensure that the row gap looks and functions as expected. Different browsers may have slight differences in how they render the grid layout.

Conclusion#

Controlling the space between grid rows in HTML and CSS is an essential skill for web designers. By understanding the fundamental concepts, usage methods, common practices, and best practices, you can create visually appealing and responsive grid layouts. The row - gap and gap properties provide a simple and effective way to manage the space between rows, and with the use of media queries and relative units, you can make your layouts more flexible and accessible.

References#

2025-10