Функция CSS `repeat()`

repeat() CSS функция представляет собой повторяющийся фрагмент списка треков или списка линий правил. Она позволяет записывать повторяющиеся шаблоны столбцов, строк и их оформления промежутков в компактной форме.

Попробуйте

grid-template-columns: repeat(2, 60px);
rule-color: repeat(2, green, orange), yellow;

grid-template-columns: 1fr repeat(2, 60px);
rule-color: repeat(2, green), repeat(2, yellow);

grid-template-columns: repeat(2, 20px 1fr);
rule-color: repeat(auto, green), repeat(2, yellow);

grid-template-columns: repeat(auto-fill, 40px);
rule-color: repeat(2, orange, yellow), repeat(auto, green);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
  rule: solid 4px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Эту функцию можно использовать со следующими свойствами:

Свойства CSS Grid:

• grid-template-columns
• grid-template-rows

Свойства CSS для промежутков:

• column-rule-color
• row-rule-color
• rule-color — сокращённое свойство
• column-rule-style
• row-rule-style
• rule-style — сокращённое свойство
• column-rule-width
• row-rule-width
• rule-width — сокращённое свойство
• column-rule — сокращённое свойство
• row-rule — сокращённое свойство
• rule — сокращённое свойство

Синтаксис

/* <track-repeat> values */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/* <auto-repeat> values */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/* <fixed-repeat> values */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

/* <name-repeat> values */
repeat(5, [footer])
repeat(auto-fill, [header])
repeat(2, [header footer])

/* <repeat-line> */
repeat(4, dashed)
repeat(2, solid, dotted, inset)
repeat(3, medium)
repeat(4, red)
repeat(3, green medium outset)

/* <auto-repeat-line> */
repeat(auto, dotted)
repeat(auto, 10px)
repeat(auto, currentcolor)
repeat(auto, red, blue, green)
repeat(auto, var(--lineColor) var(--lineSize) solid)

Значения

Функция repeat() принимает два аргумента: первый задаёт количество повторений, а второй — список повторяемых значений (список значений для повторения).

Значения количества повторений

<integer>

Положительное целое число, большее или равное 1, задающее количество повторений списка компонентов из второго параметра.

auto-fill

Задаёт автоматический повторитель, который повторяет значения, чтобы заполнить пространство. Вычисляется как наибольшее количество повторений, не приводящее к переполнению ограниченного (имеющего максимальный размер) контейнера содержимого. В противном случае, если у контейнера содержимого есть минимальный размер, используется наименьшее количество повторений, удовлетворяющее этому размеру. Если нет ни минимального, ни максимального размера, вычисляется как 1. При использовании с подрешёткой второй параметр должен быть списком имён линий.

auto-fit

Ведёт себя как auto-fill, но после размещения элементов сетки все пустые повторяющиеся треки сворачиваются.

auto

Задаёт автоматический повторитель. После применения значений из других компонентов значения из второго параметра повторяются столько раз, сколько необходимо, заполняя все отсутствующие значения.

Список повторяемых значений

Список одного из следующих типов списков треков. Разделяются ли компоненты списка запятыми или пробелами, зависит от разделителя, предусмотренного для данного типа списка значений свойства.

<line-names>

Чтобы добавить имена линий в подрешётки, каждый <line-names> — это ноль или несколько значений <custom-ident>, разделённых пробелами и заключённых в квадратные скобки, например [start header-start].

<track-size>

Каждый <track-size> — это положительное значение <length-percentage>, функция minmax(), первым параметром которой является ключевое слово min-content, max-content или auto, либо положительное значение <length-percentage>, либо функция fit-content.

<fixed-size>

Каждый <fixed-size> — это либо положительное значение <length-percentage>, либо функция minmax(), первый параметр которой является положительным значением <length-percentage>, а второй — неотрицательной размерностью с единицей fr, задающей коэффициент гибкости трека, или ключевым словом min-content, max-content или auto; либо функция minmax(), первый параметр которой является положительным значением <length-percentage> или ключевым словом min-content, max-content или auto, а второй параметр — положительным значением <length-percentage>.

<value>

При определении правил промежутков каждый <value> — это значение, допустимое для свойства, в котором встречается repeat(), например <line-style>, <line-width>, color или все три значения в виде <gap-rule>.

Описание

Функция repeat() представляет собой повторяющийся фрагмент в списке значений, разделённых запятыми или пробелами. Она позволяет записывать повторяющийся шаблон в более компактной форме, чтобы повторять его заданное количество раз или автоматически.

Общий вид синтаксиса repeat() приблизительно таков:

repeat( <repeat-count>, <values-list> )

Первый аргумент — количество повторений — задаёт число повторений. Он определяет, сколько раз следует повторить список значений, указанный во втором параметре. Это значение задаётся целым числом 1 или больше либо ключевым словом auto-fill, auto-fit или auto.

Второй аргумент — список значений, разделённых запятыми или пробелами, допустимых для свойства, в котором встречается repeat(). Он задаёт тип повторяемого значения, которым обычно являются повторяемые треки или свойства правил.

треки:

Задаёт набор повторяемых треков. По сути, это одно или несколько значений, разделённых пробелами, каждое из которых задаёт размер соответствующего трека. Каждый размер задаётся значением <track-size> или <fixed-size>. Перед каждым треком или после него также можно указать одно или несколько имён линий, добавив значения <line-names> до и/или после размера трека.

свойство правила:

Задаёт повторяемое свойство правила. Это либо список значений color, <line-width> или <line-style>, разделённых запятыми, либо список сокращённых объявлений, задающих цвет, ширину и стиль линии.

Формы синтаксиса

Функция repeat() имеет несколько форм синтаксиса:

<track-repeat> = repeat( <integer>, [ <line-names>? <track-size> ]+ <line-names>? )

Элемент <integer> задаёт количество повторений.

Значения <track-size> задают размер трека. Значение <track-size> — это либо <length-percentage>, значение flex (положительное значение в единицах fr), ключевое слово min-content, max-content или auto, функция fit-content с параметром <length-percentage> либо функция minmax(). Для значений треков minmax() элемент min — это либо <length-percentage>, либо ключевое слово min-content, max-content или auto, тогда как max может быть любым из этих значений или значением <flex>.

Перед каждым <track-size> могут указываться <line-names> — ноль или несколько значений <custom-ident>, разделённых пробелами и заключённых в квадратные скобки.

Завершающий элемент <line-names> необязателен.

<auto-repeat> = repeat( auto-fill | auto-fit, [ <line-names>? <fixed-size> ]+ <line-names>? )

Ключевое слово auto-fill или auto-fit задаёт количество повторений.

Элемент <fixed-size> задаёт размер трека. Значение <fixed-size> — это либо значение <length-percentage>, либо функция minmax(), в которой параметр min или max является значением <length-percentage>, а второй параметр также является значением <length-percentage> или задан ключевым словом min-content, max-content или auto.

Перед каждым <fixed-size> может указываться <line-names>.

Завершающий элемент <line-names> необязателен.

<fixed-repeat> = repeat( <integer>, [ <line-names>? <fixed-size> ]+ <line-names>? )

То же, что и <auto-repeat>, но элемент <integer> задаёт количество повторений, поэтому автоматического повторения нет.

<name-repeat> = repeat( [ <integer> | auto-fill ], <line-names>+)

Целое число или ключевое слово auto-fill задаёт количество повторений.

Элемент <line-names> — это одно или несколько значений <custom-ident>, разделённых пробелами и заключённых в квадратные скобки.

Эти имена линий (а не размеры треков) актуальны для subgrid.

<repeat-value-type> = repeat( <integer> , <value># )

Элемент <integer> задаёт количество повторений.

Элемент <value> — это одно или несколько допустимых значений свойства, к которому применяется функция repeat(), разделённых запятыми.

В одном объявлении значения можно использовать несколько функций repeat() типа <repeat-value-type>.

<auto-repeat-value-type> = repeat( auto , <value># )

Ключевое слово auto задаёт автоматический повторитель. Автоматический повторитель заполняет значения, отсутствующие в промежутках, которые иначе не получили бы значений из других частей списка.

Элемент <value> — это одно или несколько допустимых значений свойства, к которому применяется функция repeat(), разделённых запятыми.

В одном списке значений автоматическим повторителем может быть не более одной функции repeat().

Сравнение auto-fit и auto-fill

Если первый параметр функции repeat() — это ключевое слово auto-fill, auto-fit или auto, а не целое число, создаётся автоматический повторитель. Автоматически повторяющая функция repeat() повторяет значения, заданные вторым параметром, столько раз, сколько необходимо.

При использовании auto-fill, если для контейнера задан определённый или максимальный размер по соответствующей оси, количество повторений является наибольшим возможным положительным целым числом, при котором содержимое не выходит за пределы контейнера. Каждый трек считается имеющим максимально возможную функцию определения размера (каждое независимое значение, используемое для определения grid-template-rows или grid-template-columns), если она определена. В противном случае, если определённый или максимальный размер не задан, функция repeat() является функцией минимального размера трека. Если любое количество повторений приведёт к переполнению, количество повторений равно 1. В противном случае, если для контейнера сетки задан определённый минимальный размер по соответствующей оси, количество повторений является наименьшим возможным положительным целым числом, удовлетворяющим этому минимальному требованию. В остальных случаях указанный список треков повторяется только один раз.

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

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

Чтобы определить количество автоматически повторяемых треков, пользовательский агент округляет размер трека вниз до значения, заданного пользовательским агентом (например, 1px), чтобы избежать деления на ноль.

Исключения и правила использования

При использовании repeat() действуют некоторые правила и ограничения:

Значение свойства может содержать несколько функций repeat().

.wrapper {
  grid-template-columns:
    repeat(2, 10px)
    repeat(2, minmax(min-content, max-content));
}

Значение свойства может содержать не более одной функции автоматического повтора repeat().

.wrapper {
  row-rule:
    repeat(auto, yellow 3px solid, red 1px dashed),
    repeat(auto, green 5px dotted);
}

Если в объявлении свойства используется <auto-repeat>, все дополнительные вызовы repeat() могут использовать только <fixed-repeat>. Автоматические повторения (auto-fill или auto-fit) нельзя сочетать с полностью внутренними или гибкими размерами. Например, следующий вариант недопустим, поскольку сочетает форму <auto-repeat> с формой <track-repeat>:

.wrapper {
  grid-template-columns:
    repeat(auto-fill, 10px)
    repeat(2, minmax(min-content, max-content));
}

Запись repeat() нельзя вкладывать в другую функцию repeat().

.wrapper {
  grid-template-columns: repeat(
    2,
    minmax(min-content, max-content),
    repeat(3, 10px)
  );
  column-rule: repeat(
    auto,
    yellow 3px solid,
    repeat(5, green 5px dotted),
    red 1px dashed
  );
}

Формальный синтаксис

<repeat-line> <track-repeat> <auto-repeat> <fixed-repeat> <name-repeat> <auto-repeat-line>

Примеры

Задание столбцов сетки с помощью repeat()

HTML

<div id="container">
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>Inflexible item of 100 pixels width.</div>
</div>

CSS

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• grid-template
• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• Размещение по линиям в CSS Grid
• Области шаблона сетки: сокращённые свойства определения сетки
• CSS Grid Layout модуль
• CSS Gaps модуль