Справочник HTML & CSS

grid-template-rows

Количество и высота рядов сетки.

Синтаксис

grid-template-rows: size size …;

Значения

Параметр	Тип	Описание
auto	keyword	По высоте содержимого.
fr	fraction	Доля свободной высоты.
px	length	Фиксированная высота.

Примеры

Классическая раскладка страницы — шапка, содержимое и подвал:

<style>
  .page { display: grid; grid-template-rows: auto 1fr auto; height: 180px; gap: 4px; }
  .page > * { padding: 6px; background: lavender; margin: 0; }
</style>
 
<div class="page">
  <header>Header — auto</header>
  <main>Content — 1fr takes the rest</main>
  <footer>Footer — auto</footer>
</div>

Примечания

Ряды, которые не перечислены, создаются автоматически; их высоту задаёт grid-auto-rows. Рядам в fr нужен контейнер с известной высотой.

См. также

grid-template-columns — Количество и ширина колонок сетки.
grid-auto-flow — Как сетка размещает элементы без явно заданного места.
grid-template-areas — Рисует раскладку сетки картой именованных областей.
subgrid — Значение `grid-template-columns` и `grid-template-rows`, с которым вложенная сетка использует дорожки родительской сетки.

Вопросы и ответы по теме

В учебнике

Grid — Сетка CSS Grid — колонки и строки, единица fr, функции repeat и minmax, промежутки и адаптивная сетка без медиазапросов.

Спасибо, что читаете!