Функция 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 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%.
