Funkcija repeat u CSS gridovima
Ako imate više kolona,
kojima se zadaju jednake veličine,
onda možete pojednostaviti zapis korišćenjem
funkcije repeat.
U prvom parametru ove funkcije se navodi
broj kolona, a u drugom - njihova širina.
Pogledajmo na primerima,
kako ovo funkcioniše.
Primer
Recimo da imamo tri kolone iste veličine:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Pojednostavimo zapis pomoću repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Primer
Recimo da imamo tri kolone iste veličine, a četvrta druge veličine:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Pojednostavimo zapis pomoću repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Primer
Recimo da imamo prve tri kolone jedne veličine, a druge tri kolone druge veličine:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Pojednostavimo zapis pomoću repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Primer
Recimo da imamo prve tri kolone jedne veličine, zatim još jedna kolona, a zatim još tri kolone druge veličine:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Pojednostavimo zapis pomoću repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Primer
Pojednostavljenje funkcioniše za bilo koje jedinice veličina. Recimo za primer da imamo tri kolone u pikselima:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Pojednostavimo zapis pomoću repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktični zadaci
Napravite 4 kolone iste
veličine pomoću repeat.
Napravite 4 kolone veličine 100px,
i još 3 kolone veličine 2fr.
Napravite 2 kolone veličine 100px,
još 3 kolone veličine 200px,
zatim kolonu veličine 1fr,
i zatim 2 kolone
veličine 10%.
