Грид-разметка CSS: как работает нотация repeat

Development | Amber | Комментировать запись

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

Давайте предположим, что у нас есть такое определение контейнера сетки:

.container {
  display: grid;
  grid-gap: 10px 15px;

  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
  grid-template-rows: 100px auto 20% 100px auto 20px;
}

Нотация repeat() может ее упростить:

.container {
  display: grid;
  grid-gap: 10px 15px;

  grid-template-columns: repeat(3, 1fr 2fr);
  grid-template-rows: repeat(2, 100px auto 20%);
}

Первое значение, переданное в repeat(), — это количество повторений, а второе значение — количество повторяющихся дорожек сетки.

Repeat() и именованные строки

Также эту нотацию можно использовать с именованными строками:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns: repeat(4, [col] 1fr);
  grid-template-rows: repeat(5, [row] 150px);
}

Без нотации такое определение выглядело бы вот так:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns:
    [col] 1fr
    [col] 1fr
    [col] 1fr
    [col] 1fr;
  grid-template-rows:
    [row] 150px
    [row] 150px
    [row] 150px
    [row] 150px
    [row] 150px;
}

Именованные строки сетки в нотации repeat используют одно и то же имя для начала и конца:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
  grid-template-rows: repeat(5, [row-start] 150px [row-end]);
}

Без сокращений эта запись имела бы такой вид:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns:
    [col-start] 1fr
    [col-end col-start] 1fr
    [col-end col-start] 1fr
    [col-end col-start] 1fr [col-end];

  grid-template-rows:
    [row-start] 150px
    [row-end row-start] 150px
    [row-end row-start] 150px
    [row-end row-start] 150px
    [row-end row-start] 150px [row-end];
}

Читайте также: Грид-разметка CSS: макет Holy Grail