Funksjonen repeat i CSS-grid
Hvis du har flere kolonner,
som har samme størrelser,
kan du forenkle oppføringen ved å bruke
funksjonen repeat.
I den første parameteren til denne funksjonen spesifiseres
antall kolonner, og i den andre - deres bredde.
La oss se på eksempler,
hvordan dette fungerer.
Eksempel
La oss si at vi har tre kolonner med samme størrelse:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Forenkle oppføringen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Eksempel
La oss si at vi har tre kolonner med samme størrelse, og en fjerde med en annen størrelse:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Forenkle oppføringen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Eksempel
La oss si at de første tre kolonnene har en størrelse, og de neste tre kolonnene har en annen størrelse:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Forenkle oppføringen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Eksempel
La oss si at vi har de første tre kolonnene med en størrelse, deretter en kolonne til, og deretter tre kolonner med en annen størrelse:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Forenkle oppføringen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Eksempel
Forenklingen fungerer for alle enheter for størrelser. La oss for eksempel si at vi har tre kolonner i piksler:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Forenkle oppføringen med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktiske oppgaver
Lag 4 kolonner med samme
størrelse ved hjelp av repeat.
Lag 4 kolonner med størrelsen 100px,
og 3 kolonner med størrelsen 2fr.
Lag 2 kolonner med størrelsen 100px,
3 kolonner med størrelsen 200px,
deretter en kolonne med størrelsen 1fr,
og deretter 2 kolonner
med størrelsen 10%.
