Функция repeat в CSS гридах
Если у вас несколько столбцов,
для которых задаются одинаковые размеры,
то можно упростить запись, использовав
функцию repeat.
В первом параметре этой функции указывается
количество столбцов, а во втором - их ширина.
Давайте посмотрим на примерах,
как это работает.
Пример
Пусть у нас есть три колонки одинакового размера:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Упростим запись с помощью repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Пример
Пусть у нас есть три колонки одинакового размера, а четвертая другого размера:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Упростим запись с помощью repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Пример
Пусть у нас есть первые три колонки одного размера, а вторые три колонки другого размера:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Упростим запись с помощью repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Пример
Пусть у нас есть первые три колонки одного размера, а вторые три колонки другого размера:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Упростим запись с помощью repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Пример
Пусть у нас есть первые три колонки одного размера, потом еще колонка, а потом еще три колонки другого размера:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Упростим запись с помощью repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Пример
Упрощение работает для любых единиц размеров. Пусть для примера у нас есть три колонки в пикселях:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Упростим запись с помощью repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Практические задачи
Сделайте 4 столбца одинакового
размера при помощи repeat.
Сделайте 4 столбца размером 100px,
а еще 3 столбца размером 2fr.
Сделайте 2 столбца размером 100px,
еще 3 столбца размером 200px,
потом столбец размером 1fr,
и потом 2 столбца
размером 10%.