Как работает функция minmax() в CSS Grid Layout?

Функция minmax() в CSS Grid Layout позволяет задать размер колонки или ряда в минимальном и максимальном диапазоне. www.hongkiat.com Это нужно, чтобы сетка могла адаптироваться к ширине окна каждого пользователя. www.hongkiat.com

Синтаксис функции простой: она принимает два аргумента — минимальный и максимальный размер. www.hongkiat.com Значение минимального размера должно быть меньше максимального, иначе браузер проигнорирует максимальное значение. www.hongkiat.com

Пример работы функции для колонок: при изменении размера окна ширина колонки будет меняться в заданном диапазоне. webcademy.ru Например, в случае записи grid-template-columns: minmax(200px, 1fr) колонка займёт 1 часть свободного пространства грид-контейнера, но не меньше 200 пикселей. doka.guide

Пример работы функции для рядов: grid-template-rows: 50px minmax(50px, auto) 50px. webcademy.ru Значение auto указывает на то, что ряд будет расширяться настолько, насколько этого потребует контент. webcademy.ru