CSS: grid-template-rows

The grid-template-rows property defines the sizes of row tracks in a Grid container.

Minimal example

.layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

This pattern can give a layout a content-sized header and footer with a flexible middle row. Choose sizes that still work when content grows or the viewport becomes short.

Common mistakes

• Do not force a fixed row height when text may wrap; use auto or a minimum instead.
• Remember that row sizing belongs on the container.
• Test long content and zoom so it is not clipped.