Repeat-funktionen i CSS-grid
Hvis du har flere kolonner,
der skal have de samme størrelser,
kan du forenkle notationen ved at bruge
funktionen repeat.
Den første parameter i denne funktion angiver
antallet af kolonner, og den anden - deres bredde.
Lad os se på eksempler,
hvordan dette fungerer.
Eksempel
Lad os sige, at vi har tre kolonner af samme størrelse:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Forenkel notationen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Eksempel
Lad os sige, at vi har tre kolonner af samme størrelse, og en fjerde kolonne af en anden størrelse:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Forenkel notationen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Eksempel
Lad os sige, at de første tre kolonner har én størrelse, og de næste tre kolonner har en anden størrelse:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Forenkel notationen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Eksempel
Lad os sige, at de første tre kolonner har én størrelse, derefter kommer der en kolonne mere, og derefter yderligere tre kolonner af en anden størrelse:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Forenkel notationen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Eksempel
Forenklingen fungerer for alle enheder for størrelser. Lad os for eksempel sige, at vi har tre kolonner i pixels:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Forenkel notationen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktiske opgaver
Lav 4 kolonner af samme
størrelse ved hjælp af repeat.
Lav 4 kolonner med størrelsen 100px,
og yderligere 3 kolonner med størrelsen 2fr.
Lav 2 kolonner med størrelsen 100px,
yderligere 3 kolonner med størrelsen 200px,
derefter en kolonne med størrelsen 1fr,
og derefter 2 kolonner
med størrelsen 10%.
