Funkcija repeat v CSS mrežah
Če imate več stolpcev,
ki imajo določene enake velikosti,
lahko poenostavite zapis z uporabo
funkcije repeat.
V prvem parametru te funkcije je določeno
število stolpcev, v drugem pa njihova širina.
Poglejmo si s primeri,
kako to deluje.
Primer
Recimo, da imamo tri stolpce enake velikosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Poenostavimo zapis z repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Primer
Recimo, da imamo tri stolpce enake velikosti, četrti pa drugačne velikosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Poenostavimo zapis z repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Primer
Recimo, da so prvi trije stolpci enake velikosti, drugi trije stolpci pa drugačne velikosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Poenostavimo zapis z repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Primer
Recimo, da so prvi trije stolpci enake velikosti, nato še en stolpec, nato pa še trije stolpci drugačne velikosti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Poenostavimo zapis z repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Primer
Poenostavitev deluje za vse enote velikosti. Recimo za primer, da imamo tri stolpce v slikovnih pikah:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Poenostavimo zapis z repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktične naloge
Naredite 4 stolpce enake
velikosti s pomočjo repeat.
Naredite 4 stolpce velikosti 100px,
in še 3 stolpce velikosti 2fr.
Naredite 2 stolpca velikosti 100px,
še 3 stolpce velikosti 200px,
nato stolpec velikosti 1fr,
in nato 2 stolpca
velikosti 10%.
