CSS grid-auto-rows Property

Definition and Usage

The grid-auto-rows property sets the size of implicitly created row tracks. Implicit rows appear when items need more rows than grid-template-rows defines—for example with the default grid-auto-flow: row, or when an item is placed past the last explicit row.

It is set on the grid container, is not inherited, and the initial value is auto. Explicit rows from grid-template-rows are unchanged. For implicit columns, use grid-auto-columns.

CSS Syntax

A track size can be auto, a length, a percentage, fr, minmax(), min-content, max-content, or fit-content().

Property Values

You can list several sizes to repeat a pattern across successive implicit rows.

How to Use grid-auto-rows

Create a grid that needs extra rows, then size those extras on the container.

1. Set display: grid on the container.
2. Cause implicit rows: keep grid-auto-flow: row (default) with more items than fit, or place an item past the explicit rows.
3. Set grid-auto-rows to the height you want for those new rows.
4. Keep planned rows in grid-template-rows; this property does not replace that list.

Live Preview

Three fixed columns and default row flow. Six items create two implicit rows. Only grid-auto-rows changes.

CSS Examples

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

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 60px;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

<style>
  section {
    display: grid;
    height: 200px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

<style>
  section {
    display: grid;
    height: 200px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: minmax(40px, 1fr);
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

Key Takeaways