CSS-gridien repeat-funktio
Jos sinulla on useita sarakkeita,
joille on asetettu samat mitat,
voit yksinkertaistaa merkintää käyttämällä
funktiota repeat.
Tämän funktion ensimmäisessä parametrissa määritetään
sarakkeiden lukumäärä ja toisessa - niiden leveys.
Katsotaan esimerkkien avulla,
kuinka tämä toimii.
Esimerkki
Oletetaan, että meillä on kolme samankokoista saraketta:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Yksinkertaistetaan merkintää repeat-funktion avulla:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Esimerkki
Oletetaan, että meillä on kolme samankokoista saraketta ja neljäs erikokoinen:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Yksinkertaistetaan merkintää repeat-funktion avulla:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Esimerkki
Oletetaan, että meillä on kolme ensimmäistä saraketta yhdestä koosta ja toiset kolme saraketta toisesta koosta:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Yksinkertaistetaan merkintää repeat-funktion avulla:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Esimerkki
Oletetaan, että meillä on kolme ensimmäistä saraketta yhdestä koosta, sitten toinen sarake, ja sitten vielä kolme saraketta toisesta koosta:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Yksinkertaistetaan merkintää repeat-funktion avulla:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Esimerkki
Yksinkertaistaminen toimii kaikille mittayksiköille. Otetaan esimerkiksi kolme pikselimittaista saraketta:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Yksinkertaistetaan merkintää repeat-funktion avulla:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Käytännön tehtävät
Tee 4 samankokoista
saraketta repeat-funktion avulla.
Tee 4 saraketta, joiden koko on 100px,
ja vielä 3 saraketta, joiden koko on 2fr.
Tee 2 saraketta, joiden koko on 100px,
vielä 3 saraketta, joiden koko on 200px,
sitten sarake, jonka koko on 1fr,
ja sitten 2 saraketta
joiden koko on 10%.
