Функцијата repeat во CSS Grid
Ако имате неколку колони
за кои се задаваат исти димензии,
тогаш можете да ја поедноставите запишувањето со користење на
функцијата 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%.
