Home >CSS >CSS reference – properties, selectors, functions >grid-template-rows

grid-template-rows

grid-template-rows: none | <track-list> | subgrid

Sets the number and height of the rows of a grid container, with the same syntax as grid-template-columns for columns. Extra rows (more items than cells) are created automatically with the height from grid-auto-rows.

Values

none – the default: rows are created automatically by the number of items.
length, percentage (of the height of the container), auto (by content), min-content, max-content.
fr – a share of the free height; it makes sense only for a container with a given height.
functions repeat(), minmax(), fit-content(), named lines and subgrid as for columns.

Initial value: none. Inherited: no. Applies to: grid containers.

Examples

A page with a header and a footer sized by their content and the content filling the rest of the height:

<div class="grid">
  <div>header (auto)</div>
  <div>content (1fr)</div>
  <div>footer (auto)</div>
</div>

.grid {
  display: grid;
  gap: 6px;
  max-width: 320px;
  padding: 6px;
  border: 2px dashed #999;
}
.grid > div {
  padding: 6px 8px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.grid {
  grid-template-rows: auto 1fr auto;
  height: 180px;
}

result

header (auto)

content (1fr)

footer (auto)

For a whole page you write min-height: 100dvh instead of height: 180px – the footer then stays at the bottom even with short content.

Things to watch out for

A container without a height is as tall as its content – fr rows then have nothing to share and behave like auto.
A fixed row height overflows when there is more text. For rows with content minmax(100px, auto) is better – at least 100 px, more by content.
The height of extra (automatic) rows is set in grid-auto-rows, not here.

Browser support

Baseline – widely available: in all major browsers since October 2017, considered widely available since April 2020. Since version: Chrome 57, Firefox 52, Safari 10.1. As of October 2026 (MDN browser-compat-data).