minmax()
Размер дорожки сетки между минимумом и максимумом.
Синтаксис
minmax(min, max)Параметры
| Параметр | Тип | Описание |
|---|---|---|
| min | length | Наименьший размер. |
| max | length | fr | Наибольший размер; `1fr` означает «забрать свободное место». |
Примеры
Боковая колонка, которая не бывает ни слишком узкой, ни слишком широкой:
<style>
.grid { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 6px; }
.grid div { padding: 8px; background: peachpuff; }
</style>
<div class="grid"><div>Between 120 and 200px</div><div>The rest</div></div>Примечания
Часто используется вместе с repeat(auto-fill, …) для адаптивных сеток карточек. Работает только в размерах дорожек сетки.
См. также
- repeat() — Повторяет дорожки сетки, чтобы не выписывать их по одной.
- grid-template-columns — Количество и ширина колонок сетки.
Вопросы и ответы по теме
В учебнике
- Grid — Сетка CSS Grid — колонки и строки, единица fr, функции repeat и minmax, промежутки и адаптивная сетка без медиазапросов.