minmax: границы размеров

minmax(min, max) — CSS-функция для Grid, задающая диапазон размера трека: не меньше min и не больше max, позволяя сетке гибко растягиваться и сжиматься.

Зачем нужно

Фиксированные размеры колонок делают раскладку негибкой. minmax задаёт допустимый диапазон — трек растёт вместе с контейнером, но не выходит за границы. Это основа адаптивных Grid-раскладок без media queries.

Где используется

  • Адаптивные карточные галереи: minmax(200px, 1fr)
  • Колонки с минимальной шириной для читаемости текста
  • Строки с минимальной высотой, но авторасширением: minmax(80px, auto)
  • Паттерн RAM (Repeat, Auto, Minmax) для автоматических колонок

Синтаксис

grid-template-columns: minmax(min, max);

Оба аргумента принимают: px, %, fr, auto, min-content, max-content.

Примеры

Базовый: колонка не уже 200px, растётся до 1fr

.grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
  gap: 16px;
}

Паттерн RAM — адаптивные колонки без media queries

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

<div class="gallery">
  <div class="card">Карточка 1</div>
  <div class="card">Карточка 2</div>
  <div class="card">Карточка 3</div>
</div>

При ширине контейнера 800px влезает 3 колонки, при 500px — 2, при 260px — 1.

Строки с минимальной высотой

.grid {
  display: grid;
  grid-template-rows: minmax(60px, auto); /* минимум 60px, растётся по контенту */
}

max = 1fr, min = 0 (аналог flex: 1)

.grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  /* Аналог flex: 1 и flex: 2 */
}

Ограничения

  • fr нельзя использовать как min (только как max)
  • minmax(1fr, 2fr) — ошибка; используйте minmax(100px, 2fr)

Частые ошибки

  1. fr как минимум — minmax(1fr, 2fr) невалидно; fr допустим только как максимум.
  2. auto-fill vs auto-fit — с auto-fill пустые колонки занимают место; с auto-fit они схлопываются до нуля.
  3. Забыть min-width: 0 на содержимом — содержимое может распирать ячейку даже при minmax.

Связанные темы

Ресурсы