De repeat-functie in CSS-grids
Als u meerdere kolommen heeft
waaraan dezelfde afmetingen worden toegekend,
kan u de notatie vereenvoudigen door gebruik te maken van
de functie repeat.
In de eerste parameter van deze functie wordt
het aantal kolommen opgegeven, en in de tweede - hun breedte.
Laten we aan de hand van voorbeelden bekijken
hoe dit werkt.
Voorbeeld
Stel we hebben drie kolommen van hetzelfde formaat:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Laten we de notatie vereenvoudigen met repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Voorbeeld
Stel we hebben drie kolommen van hetzelfde formaat, en een vierde kolom met een andere grootte:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Laten we de notatie vereenvoudigen met repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Voorbeeld
Stel de eerste drie kolommen hebben het ene formaat, en de volgende drie kolommen een ander formaat:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Laten we de notatie vereenvoudigen met repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Voorbeeld
Stel we hebben de eerste drie kolommen van het ene formaat, dan nog een kolom, en daarna nog drie kolommen van een ander formaat:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Laten we de notatie vereenvoudigen met repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Voorbeeld
De vereenvoudiging werkt voor alle eenheden van afmetingen. Stel bijvoorbeeld dat we drie kolommen in pixels hebben:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Laten we de notatie vereenvoudigen met repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktische opdrachten
Maak 4 kolommen van hetzelfde
formaat met behulp van repeat.
Maak 4 kolommen met een grootte van 100px,
en nog 3 kolommen met een grootte van 2fr.
Maak 2 kolommen met een grootte van 100px,
nog 3 kolommen met een grootte van 200px,
dan een kolom met een grootte van 1fr,
en daarna 2 kolommen
met een grootte van 10%.
