Как сделать количество колонок в CSS Grid (grid-template-columns) динамическим/адаптивным вместо фиксированного числа колонок?

Динамические колонки в CSS Grid

Вместо фиксированного числа колонок, например grid-template-columns: 1fr 1fr 1fr, можно использовать комбинацию repeat(), auto-fit/auto-fill и minmax(). Это позволяет сетке автоматически определять количество колонок в зависимости от доступного пространства.

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

Функция repeat() принимает два аргумента: количество повторений и размер трека. Если вместо числа указать auto-fit или auto-fill, браузер сам вычисляет, сколько колонок поместится, исходя из минимальной ширины, заданной в minmax().

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

В этом примере каждая колонка будет не меньше 200px, но может растягиваться (1fr), если есть свободное место. Количество колонок будет меняться при изменении ширины контейнера.

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

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

Пример с auto-fill:

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

Если контейнер шириной 500px, а минимальная ширина колонки 150px, то поместится 3 колонки (3*150=450), и останется место для четвёртой, но она будет пустой. При auto-fit четвёртая колонка исчезнет, и три колонки растянутся на всю ширину.

Практическое применение

Этот подход идеален для карточек товаров, галерей изображений или любых списков, где количество элементов заранее неизвестно. Он избавляет от медиа-запросов для каждого брейкпоинта.

Вывод: Используйте repeat(auto-fit, minmax(…)) для адаптивных сеток без медиа-запросов. Это делает вёрстку гибкой и поддерживаемой.