Как работает repeat(auto-fill, minmax(...)) в CSS Grid и чем auto-fill отличается от auto-fit?

Как работает repeat(auto-fill, minmax(...)) в CSS Grid

Функция repeat() в CSS Grid позволяет задать повторяющийся паттерн треков. Когда первый аргумент — auto-fill или auto-fit, браузер автоматически вычисляет количество треков, которое помещается в контейнер, основываясь на минимальном размере, заданном через minmax(). Это ключевой механизм для создания адаптивных сеток без медиазапросов.

Разница между auto-fill и auto-fit

Оба значения работают похоже, но по-разному обрабатывают пустое пространство. auto-fill создаёт столько треков, сколько помещается, даже если элементов меньше — пустые треки остаются видимыми (занимают место). auto-fit схлопывает пустые треки, позволяя существующим элементам растягиваться на освободившееся пространство.

Пример кода

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

.grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

В первом случае, если элементов меньше, чем помещается треков, появятся пустые колонки. Во втором — пустые колонки исчезнут, и элементы займут всю ширину.

Где применяется

Этот подход широко используется для создания адаптивных карточек, галерей, списков товаров — когда количество элементов заранее неизвестно, а сетка должна подстраиваться под ширину экрана.

Вывод: Используйте auto-fill, если нужно сохранить равномерную сетку с фиксированным количеством колонок, и auto-fit, когда элементы должны растягиваться, заполняя всё доступное пространство.