Функция CSS repeat()

Определение и использование

CSS repeat() Функция используется для повторения группы строк или столбцов в сетке.

Если в вашей сетке много строк или столбцов, эта функция очень полезна. С помощью этой функции вы можете создать «повторяющийся шаблон» для использования.

Эта функция используется с grid-template-columns Свойства и grid-template-rows Свойства используются вместе.

Пример

Пример 1

Использование repeat() Повторение группы строк в сетке:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Попробуйте сами

Пример 2

Использование repeat() Повторение группы строк в сетке:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Попробуйте сами

CSS синтаксис

repeat(repeat-count, tracks)
Значение Описание
repeat-counts

Обязателен. Указывает на количество повторений строк или столбцов.

Может быть 1 или большим целым числом, или ключевыми словами auto-fill или auto-fit (они будут повторять строки/строки по мере необходимости, чтобы заполнить контейнер сетки).
tracks

Обязателен. Указывает на повторяющиеся строки или набор строк. можно использовать следующие значения:

  • Значения длины (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Именные линии

Технические детали

Версия: Модуль CSS Grid Layout Level 2

Поддержка браузерами

Числа в таблице указывают на версию браузера, которая首个完全支持此函数。

Кروм Эдж Фаерфокс Сафари Опера
57 16 76 10.1 44

Связанные страницы

См. также:Свойство CSS grid-template-columns

См. также:Свойство CSS grid-template-rows