repeat: повторение треков

Функция repeat в CSS Grid позволяет кратко записать повторяющиеся треки в grid-template-columns и grid-template-rows вместо перечисления каждого трека вручную.

Зачем нужно

Вместо grid-template-columns: 1fr 1fr 1fr 1fr пишем grid-template-columns: repeat(4, 1fr). Это сокращает код и делает его поддерживаемым — чтобы изменить количество колонок, достаточно изменить одно число. Вместе с auto-fill и auto-fit создаёт адаптивные раскладки без медиазапросов.

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

  • Равные колонки в Grid (repeat(3, 1fr))
  • Адаптивные карточные галереи (repeat(auto-fill, minmax(200px, 1fr)))
  • Сетки с чередующимися размерами треков
  • Шаблоны страниц с повторяющимися строками

Синтаксис

repeat(<count>, <track-size>)

/* count: целое число, auto-fill, или auto-fit */
/* track-size: px, fr, %, minmax, auto */

Примеры

Фиксированное количество равных колонок

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 равные колонки */
  gap: 16px;
}
/* Эквивалентно: 1fr 1fr 1fr 1fr */

Чередующиеся размеры

.grid {
  grid-template-columns: repeat(3, 1fr 2fr);
  /* = 1fr 2fr 1fr 2fr 1fr 2fr — 6 колонок */
}

auto-fill: заполнить как можно больше колонок

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* Сколько колонок поместится — столько и будет */

<div class="gallery">
  <div class="card">Карточка</div>
  <div class="card">Карточка</div>
  <div class="card">Карточка</div>
</div>

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

.gallery {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Пустые треки схлопываются до 0 — элементы растягиваются */
}

auto-fill vs auto-fit

auto-fill auto-fit
Пустые треки Сохраняются (занимают место) Схлопываются в 0
Мало элементов Элементы не растягиваются Элементы заполняют контейнер

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

  1. repeat в строковых значениях — нельзя внутри grid-template-areas.
  2. auto-fill с фиксированной шириной — repeat(auto-fill, 200px) без minmax не даёт адаптивности.
  3. auto-fit с auto-fill — оба ключевых слова взаимоисключающие; выбирайте одно.

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

Ресурсы