CSS grid-auto-rows Property

What You’ll Learn

The grid-auto-rows property controls how tall automatically created grid rows become when your layout needs more rows than you explicitly defined.

Introduction

The grid-auto-rows property in CSS is used to specify the size of rows in a grid container. When you create a grid layout, you may define explicit rows and columns, but any additional rows created by content will use the grid-auto-rows property to determine their size.

This property is essential for creating flexible and dynamic grid layouts that adapt to varying content sizes.

Definition and Usage

Set grid-auto-rows on a grid container alongside display: grid and grid-template-rows. Explicit rows come from your template; any extra rows the browser generates use the grid-auto-rows size. Pair with default row auto-flow when items wrap to new rows, or with explicit placement that extends beyond your template.

📝 Syntax

The syntax for the grid-auto-rows property is straightforward. You can set it using length values, percentage values, or the auto keyword:

.container {
  grid-auto-rows: value;
}

Basic Example

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

Default Value

The default value of the grid-auto-rows property is auto, which means that the size of the row will be determined by the content inside it.

Syntax Rules

• Applies to grid containers only, not individual grid items.
• Accepts one or more track sizes separated by spaces for repeating patterns.
• Affects implicit rows only; use grid-template-rows for explicit tracks.
• The property is not inherited.
• Often used with grid-auto-flow and grid-template-columns for wrapping layouts.

💎 Property Values

Examples Gallery

Set implicitly created rows to 100 pixels, then explore minmax, content keywords, and a vertical card feed.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}

.container {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 60px;
  grid-auto-rows: minmax(80px, auto);
}

.short-rows { grid-auto-rows: min-content; }
.tall-rows { grid-auto-rows: max-content; }

.feed {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 5rem;
  gap: 1rem;
}

♿ Accessibility

• Do not clip important content when using fixed row heights; allow overflow or use minmax().
• Ensure touch targets fit inside fixed-height rows on mobile devices.
• Test zoom levels so text is not cut off in short rows.
• Keep logical reading order when items wrap into new implicit rows.
• Use headings inside cards rather than relying on row position alone.

💡 Best Practices