CSS-Funktion repeat()
Beispiel
Fragment der wiederholten Spurenliste:
#container {
display: grid;
grid-template-columns: repeat(2, 50px 1fr) 100px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8CC6FF;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Selbst ausprobieren »
Definition und Verwendung
Die repeat()-Funktion repräsentiert ein wiederholtes Fragment der Track-Liste und ermöglicht, eine große Anzahl von Spalten oder Zeilen, die ein wiederkehrendes Muster anzeigen, in einer kompakteren Form zu schreiben.
Diese Funktion kann in CSS-Grid-Eigenschaften verwendet werden.grid-template-columnsundgrid-template-rows。
Unterstützte Versionen: CSS3
Browser-Unterstützung
Die Zahl in der Tabelle gibt die erste Browser-Version an, die diese Funktion unterstützt.
| Funktion | |||||
|---|---|---|---|---|---|
| var() | 57.0 | 16.0 | 76.0 | 10.1 | 44.0 |
CSS-Syntax
/* <track-repeat> values */ repeat(4, 1fr) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] 1fr [col-end]) repeat(4, [col-start] min-content [col-end]) repeat(4, [col-start] max-content [col-end]) repeat(4, [col-start] auto [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) repeat(4, [col-start] min-content [col-middle] max-content [col-end]) /* <auto-repeat> values */ repeat(auto-fill, 250px) repeat(auto-fit, 250px) repeat(auto-fill, [col-start] 250px [col-end]) repeat(auto-fit, [col-start] 250px [col-end]) repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) /* <fixed-repeat> values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
| Wert | Beschreibung |
|---|---|
| length | Positive ganzzahlige Länge. |
| percentage | Ein nicht negativer Prozentsatz relativ zur Inline-Größe des Grid-Containers für Spalten-Grid-Tracks und zur Block-Größe des Grid-Containers für Zeilen-Grid-Tracks. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, muss der Prozentsatz als auto behandelt werden. Der User Agent kann den intrinsischen Größenbeitrag des Tracks zur Größe des Grid-Containers anpassen und dabei die endgültige Größe des Tracks um den minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz einzuhalten. |
| flex | Eine nicht negative Dimension mit der Einheit fr gibt den Flex-Faktor des Tracks an. Jeder Track, der mit Flex dimensioniert wird, verteilt den verbleibenden Platz proportional gemäß seinem Flex-Faktor. |
| max-content | Stellt den Maximalwert des maximalen Inhaltsbereichs dar, der den Grid-Elementen zugewiesen ist, die den Grid-Track belegen. |
| min-content | Stellt den Minimalwert des minimalen Inhaltsbereichs dar, der den Grid-Elementen zugewiesen ist, die den Grid-Track belegen. |
| auto | Als Maximalwert ist es äquivalent zu max-content. Als Minimalwert repräsentiert es das Maximum der Mindestgrößen von Grid-Elementen, die den Grid-Track belegen (wie durch min-width/min-height angegeben). |
| auto-fill | Wenn der Grid-Container in der relevanten Achse eine definite Größe oder maximale Größe hat, dann ist die Anzahl der Wiederholungen die größtmögliche positive ganze Zahl, die nicht dazu führt, dass das Grid seinen Grid-Container überläuft. Falls definiert, wird jeder Track als seine maximale Track-Sizing-Funktion behandelt (jeder unabhängige Wert, der durch grid-template-rows oder grid-template-columns definiert ist). Andernfalls wird er als minimale Track-Sizing-Funktion behandelt, wobei Grid-Lücken in die Berechnung einbezogen werden. Wenn die Anzahl der Wiederholungen zu groß ist, dann ist der repeat-Wert 1. Andernfalls, wenn der Grid-Container in der relevanten Achse eine definite Mindestgröße hat, ist die Anzahl der Wiederholungen die kleinste positive ganze Zahl, die diese Mindestanforderung erfüllt. Andernfalls wird die angegebene Track-Liste nur einmal wiederholt. |
| auto-fit | Verhält sich wie auto-fill, außer dass nach dem Platzieren von Grid-Elementen alle leeren wiederholten Tracks kollabieren. Ein leerer Track ist einer, in den keine Grid-Elemente fließen oder der von keinen Grid-Elementen überspannt wird. (Wenn alle Tracks leer sind, kann dies dazu führen, dass alle Tracks kollabiert werden.) Ein kollabierter Track wird so behandelt, als hätte er eine einzelne feste Track-Sizing-Funktion von 0px, und die Zwischenräume auf beiden Seiten werden kollabiert. Um die Anzahl der automatisch wiederholten Tracks zu ermitteln, beschränkt der User-Agent die Track-Größe auf einen vom User-Agent angegebenen Wert (z. B. 1px), um eine Division durch null zu vermeiden. |
Weitere Erweiterungen