repeat()

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

/* <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])

Функция repeat() принимает два аргумента:

• количество повторений: первый аргумент указывает, сколько раз должен повторяться список полос. Он задаётся целым числом 1 или более, или ключевыми значениями auto-fill или auto-fit. Эти ключевые значения повторяют набор полос столько раз, сколько необходимо для заполнения контейнера сетки.
• полосы: второй аргумент задаёт набор полос, которые будут повторяться. В основе этого лежит один или более значений, где каждое значение представляет размер этой полосы. Каждый размер задаётся с помощью значения <track-size> или значения <fixed-size>. Вы также можете указать один или более имен линий перед или после каждой полосы, предоставив <line-names> значения перед и/или после размера полосы.

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

• <track-repeat>, использующая:
  • целое число для задания количества повторений
  • значения <track-size> для задания размеров полос.
• <auto-repeat>, использующая:
  • auto-fill или auto-fit для задания количества повторений
  • <fixed-size> для задания размеров полос.
• <fixed-repeat>, использующая:
  • целое число для задания количества повторений
  • значения <fixed-size> для задания размеров полос.

Затем, если объявление свойства использует <auto-repeat>, разрешается использовать только <fixed-repeat> для любых дополнительных repeat() вызовов. Например, это недопустимо, так как объединяет форму <auto-repeat> с формой <track-repeat>:

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

Существует четвёртая форма, <name-repeat>, которая используется для добавления имён линий в подсетки. Она используется только со словом subgrid и указывает только имена линий, а не размеры полос.

<fixed-size>

Одна из следующих форм:

• значение <length-percentage>
• функция minmax() со следующими компонентами:
  • min задано как <length-percentage> значение
  • max задано как одно из <length-percentage> значение, <flex> значение или одно из следующих ключевых слов: min-content, max-content или auto
• функция minmax() со следующими компонентами:
  • min задано как <length-percentage> значение или одно из следующих ключевых слов: min-content, max-content или auto
  • max задано как <length-percentage> значение.

<flex>

Неотрицательная размерность с единицей fr, задающая коэффициент растяжения полосы. Каждая полоса размером <flex> получает долю оставшегося пространства пропорционально своему коэффициенту растяжения.

<length>

Положительная целая длина.

<line-names>

Ноль или более значений <custom-ident>, разделённых пробелами и заключённых в квадратные скобки, например: [first header-start].

<percentage>

Неотрицательный процент от ширины контейнера сетки в столбцах и высоты контейнера сетки в строках. Если размер контейнера сетки зависит от размера его полос, то <percentage> должен рассматриваться как auto. Веб-браузер может скорректировать вклад полосы в размер контейнера сетки и увеличить окончательный размер полосы на минимальную величину, которая привела бы к выполнению условия процентного значения.

<track-size>

Одна из следующих форм:

• значение <length-percentage>, <flex> значение или одно из следующих ключевых слов: min-content, max-content или auto
• функция minmax() со следующими компонентами:
  • min задано как <length-percentage> значение или одно из следующих ключевых слов: min-content, max-content или auto
  • max задано как <length-percentage> значение, <flex> значение или одно из следующих ключевых слов: min-content, max-content или auto
• функция fit-content(), передающая значение <length-percentage>.

auto

В качестве максимального значения идентично max-content. В качестве минимального значения представляет собой максимальный минимальный размер (как задано в min-width/min-height) элементов сетки, занимающих полосу сетки.

auto-fill

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

auto-fit

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

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

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

max-content

Представляет собой максимальный вклад max-content элементов сетки, занимающих полосу сетки.

min-content

Представляет собой максимальный вклад min-content элементов сетки, занимающих полосу сетки.

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
• Краткая запись определения сетки: grid template areas