Что делает свойство repeat в CSS grid

Что проверяют

Умеете ли вы описывать сетку декларативно и знаете ли разницу между auto-fill и auto-fit. На ней держится адаптивная раскладка карточек без единого медиазапроса, это ежедневная задача вёрстки.

Как отвечать

repeat() это функция в описании треков, а не отдельное свойство: она живёт внутри grid-template-columns, grid-template-rows и grid-template и разворачивается в повторение перечисленных треков.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* то же, что 1fr 1fr 1fr */
}

Внутри можно перечислять несколько треков и смешивать функцию с обычной записью: repeat(2, 100px 1fr) 200px даст пять колонок. Имена линий повторяются вместе с треками.

Главная практическая польза это автоматическое число колонок:

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

Браузер сам считает, сколько колонок помещается в контейнер. Ограничение стоит назвать самому: автоматический повтор в одном списке треков допускается только один, и рядом с ним нельзя ставить треки, размер которых зависит от содержимого. Разница ключевых слов такая: auto-fill оставляет пустые треки, если элементов меньше, чем мест, а auto-fit схлопывает пустые треки в ноль, и оставшиеся карточки растягиваются на всю строку.

Где спотыкаются

Пишут repeat(auto-fill, 1fr) и не понимают, почему правило игнорируется. Автоматическому повтору нужен трек с определённым размером, поэтому и берут minmax с фиксированной нижней границей.

Второе: ставят auto-fit, когда нужен auto-fill. Три карточки в сетке на шесть мест растянутся во всю ширину и будут выглядеть сломанными, хотя код формально верен.

Третье: забывают про узкий экран. Фиксированный минимум шире вьюпорта выталкивает колонку за край и даёт горизонтальную прокрутку, спасает minmax(min(220px, 100%), 1fr).