grid-template-rows: явные строки сетки
grid-template-rows задаёт размеры явных строк CSS Grid и позволяет сочетать строки по содержимому с растягиваемой областью.
Назначение
grid-template-rows задаёт размеры явных строк CSS Grid и позволяет сочетать строки по содержимому с растягиваемой областью.
Как это работает
auto учитывает содержимое и алгоритм сетки, fr распределяет свободное пространство. Чтобы дробная строка получила определённую долю высоты, у контейнера должно быть доступное пространство по этой оси.
Пример
<style>
.layout{display:grid;grid-template-rows:auto 1fr auto;min-height:16rem;gap:8px}.layout>div{padding:12px;background:#eaf4ee}
</style>
<div class="layout"><div>Заголовок</div><div>Основная область</div><div>Пояснение</div></div>Что должно получиться
Крайние строки содержат свои подписи, а средняя принимает свободное пространство. Минимальная высота оставляет контейнеру возможность расти при увеличении содержимого.
Граница применения и частая ошибка
Фиксированная высота строки может обрезать или вытолкнуть длинный текст. Для содержимого переменного объёма проверяйте minmax и ограничения прокрутки, а не только красивый короткий пример.
Самостоятельная проверка
Добавьте длинный текст в среднюю строку. Сравните фиксированную высоту контейнера и min-height; проверьте, где возникает переполнение при увеличении шрифта.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.