CSS

📏 grid-auto-rows — Automatic Row Sizing in CSS Grid

🌐 What is grid-auto-rows?

grid-auto-rows is a CSS Grid container property that defines the height of any rows that are created automatically (implicit rows). These rows appear when grid items are placed outside the explicitly defined rows.

>>“grid-auto-rows lets you control the height of rows you didn’t explicitly define.”

📌 Why Do We Need grid-auto-rows?

Some items may span beyond the defined rows
The grid may generate new rows automatically
Without defining their size, implicit rows may collapse or vary inconsistently
It ensures consistent row height across dynamically generated areas

🎯 Syntax

grid-auto-rows Syntax

grid-auto-rows: <track-size>;

🧠 What Are Implicit Rows?

Implicit rows are created when items are placed into rows that weren’t defined ingrid-template-rows. This happens often when:

Items automatically wrap to new rows (due to grid-auto-flow)
Items span multiple rows (grid-row: span x)
Dynamic content pushes the layout downward

🧪 Basic Example

Simple Auto Rows Example

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

Any additional rows generated will have a height of 80px.

📐 Visual Example

🔥 Using grid-auto-rows With span

Row Spanning Example

.item-large {
  grid-row: span 2; /* spans 2 implicit or explicit rows */
}

With grid-auto-rows, implicit rows created by spanning have predictable height.

🏗️ Practical Example — Masonry-Like Layout

Masonry Grid Example

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px; /* base height */
  grid-auto-flow: dense;
}

.gallery .item {
  grid-row: span 20; /* height = 20 * 10px = 200px */
}

A classic use-case: handle variable item heights by controlling each item’s height via row span.

📱 Responsive Example

Responsive auto rows

.cards {
  grid-auto-rows: 150px;
}

@media (min-width: 900px) {
  .cards {
    grid-auto-rows: 200px;
  }
}

Row height adjusts according to screen size.

⚠️ Common Mistakes

Forgetting that grid-auto-rows applies only to implicit rows
Using very small auto-rows values without row spans → content may overflow
Expecting auto-rows to resize explicit rows (they do not!)
Not considering row span effects on content height

Note

🧠 Quick Tip:
If you want masonry-like heights → use a small grid-auto-rows value + row spans for each item.

🆚 grid-auto-rows vs grid-template-rows

Property	Controls
grid-template-rows	Explicit rows (you define them manually)
grid-auto-rows	Implicit rows (created automatically by the grid)

🔥 Summary

grid-auto-rows is essential for predictable, stable, and responsive grid layouts. It defines how automatically created rows behave, ensuring uniform row sizes even when items expand or wrap unexpectedly.

>>“With grid-auto-rows, implicit rows become reliable — perfectly sized and fully controlled.”

Learn more →MDN Docs 📘