CSS grid-template-rows Property

Definition and Usage

The grid-template-rows property sets the size (and optional line names) of the explicit row tracks on a grid container (display: grid).

The initial value is none. Pair it with grid-template-columns for columns, or use the grid-template shorthand. Implicit rows use grid-auto-rows.

CSS Syntax

A track list is one or more sizes such as 40px, 1fr, auto, minmax(), or repeat().

Property Values

How to Use grid-template-rows

List one size per row, top to bottom. Give the grid a height when using fr.

1. Set display: grid on the container.
2. Write row sizes: grid-template-rows: 40px 1fr;.
3. Set a definite height (for example height: 160px) so fr rows have free space to share.
4. Use repeat() or minmax() for patterns and ranges.

Live Preview

Change only grid-template-rows. The demo box has a fixed height so fr can expand.

CSS Examples

Each snippet focuses on grid-template-rows. Use Try It Yourself for a live editor.

<style>
  .grid {
    display: grid;
    height: 140px;
    grid-template-rows: 40px 1fr;
  }
</style>

<div class="grid">
  <div>1</div>
  <div>2</div>
</div>

<style>
  .grid {
    display: grid;
    height: 180px;
    grid-template-rows: repeat(3, 1fr);
  }
</style>

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<style>
  .grid {
    display: grid;
    height: 160px;
    grid-template-rows: minmax(40px, 1fr) 2fr;
  }
</style>

<div class="grid">
  <div>1</div>
  <div>2</div>
</div>

Key Takeaways