Функция minmax() в CSS Grid Layout позволяет задать размер колонки или ряда в минимальном и максимальном диапазоне. 2 Это нужно, чтобы сетка могла адаптироваться к ширине окна каждого пользователя. 2
Синтаксис функции простой: она принимает два аргумента — минимальный и максимальный размер. 2 Значение минимального размера должно быть меньше максимального, иначе браузер проигнорирует максимальное значение. 2
Пример работы функции для колонок: при изменении размера окна ширина колонки будет меняться в заданном диапазоне. 1 Например, в случае записи grid-template-columns: minmax(200px, 1fr)
колонка займёт 1 часть свободного пространства грид-контейнера, но не меньше 200 пикселей. 4
Пример работы функции для рядов: grid-template-rows: 50px minmax(50px, auto) 50px
. 1 Значение auto
указывает на то, что ряд будет расширяться настолько, насколько этого потребует контент. 1