Funkce repeat v CSS gridu
Pokud máte několik sloupců,
pro které jsou nastaveny stejné velikosti,
můžete zápis zjednodušit použitím
funkce repeat.
V prvním parametru této funkce se uvádí
počet sloupců a ve druhém - jejich šířka.
Podívejme se na příkladech,
jak to funguje.
Příklad
Předpokládejme, že máme tři sloupce stejné velikosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Zjednodušíme zápis pomocí repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Příklad
Předpokládejme, že máme tři sloupce stejné velikosti a čtvrtý sloupec jiné velikosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Zjednodušíme zápis pomocí repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Příklad
Předpokládejme, že první tři sloupce mají jednu velikost a druhé tři sloupce jinou velikost:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Zjednodušíme zápis pomocí repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Příklad
Předpokládejme, že první tři sloupce mají jednu velikost, pak další sloupec a pak další tři sloupce jiné velikosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Zjednodušíme zápis pomocí repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Příklad
Zjednodušení funguje pro jakékoli jednotky velikosti. Předpokládejme pro příklad, že máme tři sloupce v pixelech:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Zjednodušíme zápis pomocí repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktické úlohy
Vytvořte 4 sloupce stejné
velikosti pomocí repeat.
Vytvořte 4 sloupce o velikosti 100px,
a další 3 sloupce o velikosti 2fr.
Vytvořte 2 sloupce o velikosti 100px,
další 3 sloupce o velikosti 200px,
poté sloupec o velikosti 1fr,
a nakonec 2 sloupce
o velikosti 10%.
