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