CSS grid-row Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The grid-row property in CSS is a shorthand property for defining both the start and end lines of a grid item within a grid container.

It is used in CSS Grid Layout to control the placement of items within the rows of a grid, allowing for precise control over their positioning and spanning across multiple rows.

💡 Syntax

The syntax for the grid-row property combines the start and end lines of a grid item.

Syntax

Copied

element {
  grid-row: start / end;
}

start: Specifies the starting grid line for the item.
end: Specifies the ending grid line for the item.

🎛️ Default Value

The default value of the grid-row property is auto / auto, meaning the item will be placed in the next available grid cell and will span only one row.

🏠 Property Values

Value	Description
auto	Default value. The item will be placed in the next available slot.
span n:	The item will span n rows.
line-number	The item will start or end at the specified grid line.
span n / auto	The item will span n rows from the start line.
auto / span n	The item will span n rows from the end line.

📄 Example

In this example, we'll create a simple grid and position an item to span two rows.

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 Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
    }
    .grid-item {
      background-color: lightblue;
      border: 1px solid #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .item1 {
      grid-row: 1 / 3;
    }
  </style>
</head>
<body>
  <h1>Grid Item Spanning Two Rows</h1>
  <div class="grid-container">
    <div class="grid-item item1">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 property is well-supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Always test your grid layouts across different browsers to ensure compatibility.

🎉 Conclusion

The grid-row property is a versatile tool in CSS Grid Layout that allows developers to control the placement and spanning of grid items across rows.

By using this property, you can create complex and responsive grid layouts that adapt to various screen sizes and content needs. Experiment with different configurations to see how grid-row can enhance your web designs.