Funktionen repeat i CSS-grid
Om du har flera kolumner
som tilldelas samma storlekar,
kan du förenkla skrivandet genom att använda
funktionen repeat.
I den första parametern för denna funktion anges
antalet kolumner, och i den andra - deras bredd.
Låt oss titta på exempel
på hur detta fungerar.
Exempel
Låt oss säga att vi har tre kolumner med samma storlek:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Förenkla skrivandet med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Exempel
Låt oss säga att vi har tre kolumner med samma storlek, och en fjärde med en annan storlek:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Förenkla skrivandet med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Exempel
Låt oss säga att de första tre kolumnerna har en storlek, och de andra tre kolumnerna har en annan storlek:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Förenkla skrivandet med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Exempel
Låt oss säga att vi har de första tre kolumnerna med en storlek, sedan ytterligare en kolumn, och sedan ytterligare tre kolumner med en annan storlek:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Förenkla skrivandet med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Exempel
Förenklingen fungerar för alla enheter för storlekar. Låt oss som exempel anta att vi har tre kolumner i pixlar:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Förenkla skrivandet med repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktiska uppgifter
Skapa 4 kolumner med samma
storlek med hjälp av repeat.
Skapa 4 kolumner med storleken 100px,
och ytterligare 3 kolumner med storleken 2fr.
Skapa 2 kolumner med storleken 100px,
ytterligare 3 kolumner med storleken 200px,
sedan en kolumn med storleken 1fr,
och sedan 2 kolumner
med storleken 10%.
