grid-auto-rows: размер неявно созданных строк
grid-auto-rows задаёт размеры строк, которые Grid создаёт вне явно перечисленной сетки.
Назначение
grid-auto-rows задаёт размеры строк, которые Grid создаёт вне явно перечисленной сетки.
Как это работает
При автопозиционировании новые элементы могут требовать дополнительных строк. minmax с минимальной длиной и auto позволяет держать базовый размер, не запрещая рост по содержимому.
Пример
<style>
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(5rem,auto);gap:10px}.grid>div{padding:12px;background:#eaf4ee}
</style>
<div class="grid"><div>Один</div><div>Два</div><div>Три</div><div>Четыре</div></div>Что должно получиться
Созданные автоматически строки имеют минимум 5rem. Если содержимому нужно больше пространства, верхняя граница auto позволяет увеличить высоту.
Граница применения и частая ошибка
Не задавайте всем неявным строкам маленькую фиксированную высоту для текста неизвестной длины. Переполнение не исчезает от того, что строки выглядят ровными в макете.
Самостоятельная проверка
Добавьте ещё три карточки и длинный абзац в одну из них. Убедитесь, что новые строки получают то же правило и могут вырасти для текста.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.