• Теория
  • Теория

Значение minmax

Мы сделали так, чтобы количество колонок в списке зависело от ширины страницы. Но если пространство по ширине не получается разделить на количество колонок без остатка, то справа остаётся много свободного места.

Чтобы от него избавиться, можно увеличить ширину колонок. Но фиксированная ширина проблему не решит — если страница ещё увеличится, то свободное пространство появится снова. Поэтому нужно, чтобы ширина колонок изменялась динамически и зависела от наличия свободного пространства.

Это можно сделать с помощью ещё одного значения-функции minmax. Его указывают в repeat вместо фиксированной ширины колонок. В скобках после minmax задают минимальный и максимальный размеры колонок, они разделяются запятой:

repeat(auto-fit, minmax(минимальный размер, максимальный размер));

Код ниже позволит колонкам изменять ширину в зависимости от имеющегося в контейнере свободного пространства. При этом колонки не станут меньше 100px и не растянутся больше, чем на 150px:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
}

В minmax в качестве максимального значения часто используют единицу измерения fr. Она позволяет колонкам увеличивать ширину до тех пор, пока свободного пространства в контейнере не хватит на ещё одну колонку.

minmax (100px, 1fr)
width: 200px;
width: 299px;
width: 300px;

В шаблоне списка укажем с помощью minmax минимальный и максимальный размеры колонок и понаблюдаем, как перестроится список, если изменить ширину страницы. После этого посмотрим, что случится, если добавить в список карточку, чьё содержимое шире колонки.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Микросетки. Начало» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.