Grid: паттерн auto-fill + minmax

repeat(auto-fill, minmax(min, max)) — паттерн CSS Grid, создающий адаптивную сетку с автоматическим количеством колонок без медиазапросов.

Зачем нужно

Это один из самых полезных CSS-паттернов: адаптивная сетка в одну строку кода. Браузер сам определяет количество колонок на основе ширины контейнера и минимального размера элемента. Заменяет Bootstrap-колонки и сложные медиазапросы для большинства сеток.

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

  • Карточные сетки (товары, статьи, проекты)
  • Галереи изображений
  • Список иконок/функций
  • Любая адаптивная равноячеечная сетка

Основной контент

Базовый синтаксис

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

Как это работает:

  • auto-fill — создаёт столько колонок, сколько влезает
  • minmax(240px, 1fr) — каждая колонка минимум 240px, максимум 1fr (равная доля)
  • Результат: при ширине 800px — 3 колонки ~266px, при 480px — 2 колонки ~240px, при 320px — 1 колонка

auto-fill vs auto-fit

/* auto-fill: создаёт пустые колонки (ghost columns) */
.auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* При 3 карточках в 900px-контейнере: 4 колонки, 1 пустая */

/* auto-fit: пустые колонки схлопываются */
.auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* При 3 карточках в 900px-контейнере: 3 колонки, каждая 300px */

Когда auto-fill: сетка должна выровняться по левому краю, независимо от количества элементов. Когда auto-fit: 3 карточки должны заполнить всю ширину.

Ограничение максимального количества колонок

/* Максимум 4 колонки */
.grid-max4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(240px, 100%/4), 1fr));
  gap: 16px;
}

/* Или через min */
.grid-max4-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

Комбинирование с aspect-ratio

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.photo-grid__item {
  aspect-ratio: 1;
  overflow: hidden;
}

.photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

RAM (Repeat, Auto, Minmax) — принятое название паттерна

/* RAM pattern */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-col-size, 16rem), 1fr));
  gap: var(--gap, 1rem);
}

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

  • minmax(0, 1fr) vs minmax(min-content, 1fr) — без разумного минимума карточки могут стать очень узкими; всегда указывайте px-минимум
  • auto-fill растягивает одну карточку — при auto-fit одна карточка займёт всю ширину; если нужно ограничить — используйте max-width на карточке или auto-fill
  • gap не учтён в minmax — браузер учитывает gap в расчёте; не нужно вычитать вручную

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

Ресурсы