Die repeat-funksie in CSS-roosters
As jy verskeie kolomme het
waaraan dieselfde groottes toegewys word,
kan jy die skryfwerk vereenvoudig deur die
funksie repeat te gebruik.
Die eerste parameter van hierdie funksie spesifiseer
die aantal kolomme, en die tweede - hul breedte.
Kom ons kyk na voorbeelde
hoe dit werk.
Voorbeeld
Gestel ons het drie kolomme van dieselfde grootte:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Vereenvoudig die skryfwerk met behulp van repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Voorbeeld
Gestel ons het drie kolomme van dieselfde grootte, en 'n vierde kolom van 'n ander grootte:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Vereenvoudig die skryfwerk met behulp van repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Voorbeeld
Gestel ons eerste drie kolomme is van een grootte, en die volgende drie kolomme is van 'n ander grootte:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Vereenvoudig die skryfwerk met behulp van repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Voorbeeld
Gestel ons het eerste drie kolomme van een grootte, dan nog 'n kolom, en dan nog drie kolomme van 'n ander grootte:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Vereenvoudig die skryfwerk met behulp van repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Voorbeeld
Vereenvoudiging werk vir enige eenhede van grootte. Gestel as voorbeeld ons het drie kolomme in pixels:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Vereenvoudig die skryfwerk met behulp van repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktiese take
Maak 4 kolomme van dieselfde
grootte deur van repeat gebruik te maak.
Maak 4 kolomme met 'n grootte van 100px,
en nog 3 kolomme met 'n grootte van 2fr.
Maak 2 kolomme met 'n grootte van 100px,
3 kolomme met 'n grootte van 200px,
dan 'n kolom met 'n grootte van 1fr,
en dan 2 kolomme
met 'n grootte van 10%.
