Funktsioon repeat CSS grid'ides
Kui teil on mitu veergu,
millele on määratud samad suurused,
siis saab kirjet lihtsustada, kasutades
funktsiooni repeat.
Selle funktsiooni esimeses parameetris määratakse
veergude arv ja teises - nende laius.
Vaatame näidete varal,
kuidas see töötab.
Näide
Oletame, et meil on kolm sama suurusega veergu:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Lihtsustame kirjet kasutades repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Näide
Oletame, et meil on kolm sama suurusega veergu, kuid neljas on teistsuguse suurusega:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Lihtsustame kirjet kasutades repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Näide
Oletame, et meil on esimesed kolm veergu ühte suuruses, kuid teised kolm veergu on teises suuruses:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Lihtsustame kirjet kasutades repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Näide
Oletame, et meil on esimesed kolm veergu ühte suuruses, siis veel üks veerg, ja siis veel kolm veergu teises suuruses:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Lihtsustame kirjet kasutades repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Näide
Lihtsustamine töötab kõikide mõõtühikute puhul. Oletame näiteks, et meil on kolm veergu pikslites:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Lihtsustame kirjet kasutades repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktilised ülesanded
Tehke 4 sama
suurusega veergu kasutades repeat.
Tehke 4 veergu suurusega 100px,
ja veel 3 veergu suurusega 2fr.
Tehke 2 veergu suurusega 100px,
veel 3 veergu suurusega 200px,
siis veerg suurusega 1fr,
ja siis 2 veergu
suurusega 10%.
