Funkcia repeat v CSS gridoch
Ak máte niekoľko stĺpcov,
pre ktoré sú nastavené rovnaké veľkosti,
môžete zápis zjednodušiť použitím
funkcie repeat.
V prvom parametri tejto funkcie sa uvádza
počet stĺpcov a v druhom - ich šírka.
Pozrime sa na príklady,
ako to funguje.
Príklad
Predpokladajme, že máme tri stĺpce rovnakej veľkosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Zjednodušíme zápis pomocou repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Príklad
Predpokladajme, že máme tri stĺpce rovnakej veľkosti a štvrtý inej veľkosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Zjednodušíme zápis pomocou repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Príklad
Predpokladajme, že prvé tri stĺpce sú jednej veľkosti a druhé tri stĺpce inej veľkosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Zjednodušíme zápis pomocou repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Príklad
Predpokladajme, že prvé tri stĺpce sú jednej veľkosti, potom ďalší stĺpec a potom ďalšie tri stĺpce inej veľkosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Zjednodušíme zápis pomocou repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Príklad
Zjednodušenie funguje pre všetky jednotky veľkosti. Predpokladajme napríklad, že máme tri stĺpce v pixeloch:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Zjednodušíme zápis pomocou repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktické úlohy
Vytvorte 4 stĺpce rovnakej
veľkosti pomocou repeat.
Vytvorte 4 stĺpce s veľkosťou 100px,
a ešte 3 stĺpce s veľkosťou 2fr.
Vytvorte 2 stĺpce s veľkosťou 100px,
ďalšie 3 stĺpce s veľkosťou 200px,
potom stĺpec s veľkosťou 1fr,
a potom 2 stĺpce
s veľkosťou 10%.
