🌐 What is grid-template-rows?

grid-template-rows is a CSS Grid property used to define theheight, number, and behavior of rows inside a grid container. It works just like grid-template-columns, but vertically. With this property, you can create fixed-height rows, flexible rows, auto-sized rows, or even fully responsive vertical layouts.

📌 Basic Example

.container {
  display: grid;
  grid-template-rows: 100px 200px 300px;
}

This creates three rows with fixed heights.

📐 Row Size Units

🔥 Using fr Units for Row Flexibility

The fr unit divides the available vertical space proportionally.

grid-template-rows: 1fr 2fr 1fr;
/* Middle row is twice as tall */

📐 auto Height Rows

grid-template-rows: auto auto 1fr;

First two rows expand only as much as the content needs; the last row takes up remaining space.

🔁 repeat() for cleaner syntax

grid-template-rows: repeat(3, 100px);
/* Same as: 100px 100px 100px */

📱 Responsive Row Control with minmax()

grid-template-rows: minmax(150px, auto) 1fr 2fr;

The first row will always be at least 150px, but may grow larger if needed.

🧠 Explicit vs Implicit Rows

Explicit Rows

Rows defined using grid-template-rows.

Implicit Rows

When grid items overflow the defined rows, extra rows are created usinggrid-auto-rows.

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-auto-rows: 80px; /* rows added automatically */
}

🧩 Practical Layout Example: Header + Content + Footer

.layout {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
  height: 100vh;
}

• Top row = fixed header
• Middle row = flexible content
• Bottom row = fixed footer

📊 Visual Examples of grid-template-rows

⚠️ Common Mistakes

🔥 Summary

grid-template-rows defines the vertical structure of your grid. With units like fr, auto, and minmax(), you can build powerful, responsive layouts that adapt naturally to content and screen size.

Explore more here ➜MDN Docs 📘