CSS grid-template-rows Property

What You’ll Learn

The grid-template-rows property defines the number and size of row tracks in a CSS grid container.

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.

Definition and Usage

Set grid-template-rows on a grid container with display: grid. List track sizes separated by spaces, or use functions like repeat() and minmax() for flexible patterns. Pair with grid-template-columns to define the full grid structure.

📝 Syntax

The syntax for the grid-template-rows property uses a space-separated list of row sizes. Each size can be a length, a percentage, the fr unit, or the auto keyword:

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

Basic Example

.grid-container {
  display: grid;
  grid-template-rows: 100px 1fr auto;
}

With repeat()

.grid-container {
  grid-template-rows: repeat(3, 1fr);
}

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.

Syntax Rules

• Applies to grid containers only, not individual grid items.
• Accepts length, percentage, fr, auto, minmax(), and repeat().
• Each value creates one row track unless wrapped in repeat().
• The property is not inherited.
• Set an explicit height on the container when using fr row tracks.

💎 Property Values

Examples Gallery

Create fixed, flexible, and auto rows, use repeat() for equal heights, apply minmax() for bounds, and build a full-height page layout.

.grid-container {
  display: grid;
  grid-template-rows: 100px 1fr auto;
  gap: 10px;
  min-height: 300px;
}

.grid-container {
  grid-template-rows: repeat(3, 1fr);
  min-height: 300px;
}

.grid-container {
  grid-template-rows: repeat(4, minmax(80px, 1fr));
  min-height: 400px;
}

.page {
  display: grid;
  grid-template-rows: 60px 1fr 40px;
  min-height: 100vh;
}

♿ Accessibility

• Ensure sufficient row height for readable text and touch targets.
• Test at narrow and zoomed viewports when using fixed pixel row heights.
• Keep DOM order logical when rows reorder visually on small screens.
• Use semantic HTML such as <header>, <main>, and <footer>.
• Do not rely on row position alone to convey meaning; use headings and landmarks.

💡 Best Practices