auto-fill и auto-fit

auto-fill и auto-fit — ключевые слова для repeat в grid-template-columns, которые автоматически определяют количество колонок в зависимости от доступного пространства.

Зачем нужно

Классические медиазапросы требуют ручного задания числа колонок для каждого брейкпоинта. auto-fill и auto-fit позволяют создать истинно адаптивную сетку одной строкой CSS — браузер сам вычисляет оптимальное количество колонок. Это мощнейший инструмент для карточных сеток.

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

  • Адаптивные карточные сетки без медиазапросов
  • Галереи изображений
  • Списки продуктов в интернет-магазинах

Синтаксис

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* или */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

minmax(250px, 1fr) — колонка минимум 250px, максимум — вся доступная ширина.

auto-fill vs auto-fit: разница

auto-fill — заполняет колонками, даже пустыми

.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* Если контейнер 800px и элементов мало — создаёт 4 колонки,
   пустые колонки сохраняют место */

auto-fit — схлопывает пустые колонки

.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
/* Если контейнер 800px и только 2 элемента — они растягиваются
   на всю ширину, пустые колонки схлопываются */

Практический пример

/* Адаптивная карточная сетка без медиазапросов */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

<div class="cards">
  <article>Карточка 1</article>
  <article>Карточка 2</article>
  <article>Карточка 3</article>
  <article>Карточка 4</article>
  <article>Карточка 5</article>
</div>

На ширине 900px: 3 колонки по ~280px. На ширине 600px: 2 колонки. На ширине 280px: 1 колонка.

Когда что использовать

Сценарий Рекомендация
Сетка с фиксированным числом элементов auto-fit — заполнят всю ширину
Сетка с динамическим числом элементов auto-fill — пустые колонки как плейсхолдеры
Галерея изображений auto-fit — выглядит аккуратнее

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

  1. minmax без нижней границы в px — minmax(0, 1fr) даст колонки нулевой ширины; всегда задавайте разумный минимум в px
  2. Ожидание auto-fit выровнять по сетке последнюю строку — если элементов нечётное число, последний растянется. Для равномерного заполнения используйте невидимые pseudo-элементы-заглушки
  3. auto-fill/auto-fit с фиксированным числом — repeat(3, 1fr) и repeat(auto-fill, ...) несовместимы в одном вызове

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

Ресурсы