grid-auto-rows

grid-auto-rows sizes rows not sized by grid-template-rows. It is useful when an unknown number of items creates additional rows.

Explicit first row, implicit later rows

The first row is explicitly 40px tall. The remaining rows are implicit and use 70px; changing grid-auto-rows affects only those later rows.

<div class="layout">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

.layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 40px;
  grid-auto-rows: 70px;
  gap: 0.5rem;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Give cards a minimum without clipping text

Minmax(5rem,auto) gives every implicit row a minimum height while allowing content to make it taller. Add text to compare this with a fixed 5rem row.

<div class="layout">
  <div>A short note</div>
  <div>
    A longer explanation can grow this row instead of being clipped at a fixed
    height.
  </div>
  <div>Another note</div>
</div>

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  grid-auto-rows: minmax(5rem, auto);
  gap: 0.5rem;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Values and defaults

The initial value is auto and the property is not inherited. Lengths, percentages, fractions, intrinsic sizes, minmax(), and fit-content() are useful. Multiple sizes form a repeating pattern for implicit rows; repeat() notation belongs in explicit templates instead.

Row percentages use the grid container’s block size. Content-dependent height introduces cyclic percentage sizing: percentages are treated as auto for intrinsic sizing before being resolved for final layout. Fixed percentage rows plus gaps can overflow a definite height.

Why a row still grows or overflows

Auto and intrinsic sizes respond to item content. Fixed rows can be smaller than their contents, so choose wrapping, growth, or deliberate scrolling. This property does not control explicitly sized template rows, and an item’s height is not the same as the row’s size.

Learn grid-template-rows, min-height, and overflow for the surrounding constraints.

Sources and browser support

MDN: grid-auto-rows describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

CSS Grid specification defines track sizing, shorthand resets, and placement.