Die repeat-Funktion in CSS Grids
Wenn Sie mehrere Spalten haben,
die die gleiche Größe erhalten sollen,
können Sie die Schreibweise vereinfachen, indem Sie
die Funktion repeat verwenden.
Der erste Parameter dieser Funktion gibt die
Anzahl der Spalten an, der zweite - ihre Breite.
Sehen wir uns an Beispielen an,
wie das funktioniert.
Beispiel
Nehmen wir an, wir haben drei Spalten gleicher Größe:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Vereinfachen wir die Schreibweise mit repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Beispiel
Nehmen wir an, wir haben drei Spalten gleicher Größe und eine vierte mit einer anderen Größe:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Vereinfachen wir die Schreibweise mit repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Beispiel
Nehmen wir an, die ersten drei Spalten haben eine Größe, und die zweiten drei Spalten eine andere Größe:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Vereinfachen wir die Schreibweise mit repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Beispiel
Nehmen wir an, die ersten drei Spalten haben eine Größe, dann kommt eine weitere Spalte, und dann drei Spalten mit einer anderen Größe:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Vereinfachen wir die Schreibweise mit repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Beispiel
Die Vereinfachung funktioniert für alle Größeneinheiten. Nehmen wir zum Beispiel drei Spalten in Pixel:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Vereinfachen wir die Schreibweise mit repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktische Aufgaben
Erstellen Sie 4 Spalten gleicher
Größe mit Hilfe von repeat.
Erstellen Sie 4 Spalten mit der Größe 100px,
und weitere 3 Spalten mit der Größe 2fr.
Erstellen Sie 2 Spalten mit der Größe 100px,
weitere 3 Spalten mit der Größe 200px,
dann eine Spalte mit der Größe 1fr,
und dann 2 Spalten
mit der Größe 10%.
