Справочник CSS

grid-template-columns: колонки CSS Grid

grid-template-columns описывает количество и размеры колонок явной сетки. Единица fr делит доступное пространство, а repeat сокращает повторяющиеся значения.

Рабочий пример

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

minmax задаёт минимальный и максимальный размер трека. auto-fit схлопывает пустые колонки и растягивает существующие, поэтому карточки плавно заполняют строку.

Когда применять

Для простого каталога связка auto-fit и minmax часто заменяет несколько медиазапросов. Минимальную ширину выбирай по содержимому, а не по конкретной модели телефона.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

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

• Задавать слишком большой минимум и получать прокрутку
• Путать auto-fit и auto-fill
• Использовать fr в контейнере без ограниченной ширины