grid-template-rows

A property that specifies the row structure of a grid container.

Syntax

.grid-container {
display: grid;
grid-template-rows: <row-space> <row-space>;
}

where <row-space> can be one of the following:

  • Grid keyword: auto, minmax(), repeat()
  • Pixel value: 300px
  • Percent value: 25%
  • Fractional unit value: 1fr

Example 1

A div split into three sections (e.g. header, main, footer).

.spam-container {
display: grid;
grid-template-rows: 15% 70% 15%;
}

Example 2

Six equally sized columns that utilize the available space:

.eggs-container {
display: grid;
grid-template-rows: repeat(6, auto);
}
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors