CSS grid-template-rows Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 28 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The grid-template-rows property in CSS is a key component of the CSS Grid Layout system. It defines the size of each row in a grid container, allowing you to create complex and responsive grid layouts.

This property helps in organizing and aligning grid items within rows, providing control over the layout of your web content.

💡 Syntax

The syntax for the grid-template-rows property is as follows:

Syntax

Copied

element {
  grid-template-rows: value;
}

Here, value represents a space-separated list of row sizes. Each size can be specified using a length, a percentage, the fr unit, or the auto keyword.

🎛️ Default Value

The default value of the grid-template-rows property is none, which means the rows of the grid will be auto-sized based on the content.

🏠 Property Values

Value	Description
length	A specific length value, such as 100px, 2em, etc. This sets the exact size of the row.
percentage	A percentage of the grid container’s height, such as 50%.
fr (fractional unit)	Represents a fraction of the available space in the grid container. For example, 1fr and 2fr denote 1 part and 2 parts of the available space, respectively.
auto	The size of the row is determined by its content. This is the default behavior if no size is specified.

📄 Example

In this example, we create a grid layout with three rows of different sizes: a fixed height row, a flexible row, and an automatic row based on content.

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-template-rows Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: 100px 1fr auto;
      gap: 10px;
    }
    .grid-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Grid Layout with Different Row Sizes</h1>
  <div class="grid-container">
    <div class="grid-item">Row 1 (100px)</div>
    <div class="grid-item">Row 2 (Flexible)</div>
    <div class="grid-item">Row 3 (Auto-sized)</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The grid-template-rows property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Ensure that you test your grid layouts across different browsers to verify that your design appears as intended.

🎉 Conclusion

The grid-template-rows property is essential for creating well-structured grid layouts in CSS.

By defining the size of rows, you can create flexible and responsive designs that adapt to different screen sizes and content types. Experiment with various values to see how they affect the layout and achieve the design you envision.