Функция repeat в CSS гридах

Если у вас несколько столбцов, для которых задаются одинаковые размеры, то можно упростить запись, использовав функцию repeat. В первом параметре этой функции указывается количество столбцов, а во втором - их ширина. Давайте посмотрим на примерах, как это работает.

Пример

Пусть у нас есть три колонки одинакового размера:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Упростим запись с помощью repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Пример

Пусть у нас есть три колонки одинакового размера, а четвертая другого размера:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

Упростим запись с помощью repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

Пример

Пусть у нас есть первые три колонки одного размера, а вторые три колонки другого размера:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

Упростим запись с помощью repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Пример

Пусть у нас есть первые три колонки одного размера, потом еще колонка, а потом еще три колонки другого размера:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

Упростим запись с помощью repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

Пример

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

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Упростим запись с помощью repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

Практические задачи