repeat()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
Die repeat()
CSS Funktion repräsentiert ein wiederholtes Fragment der Spurliste, sodass eine große Anzahl von Spalten oder Zeilen, die ein wiederkehrendes Muster aufweisen, in einer kompakteren Form geschrieben werden können.
Probieren Sie es aus
Diese Funktion kann in den CSS-Grid-Eigenschaften grid-template-columns
und grid-template-rows
verwendet werden.
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])
Die repeat()
-Funktion nimmt zwei Argumente an:
- Wiederholungsanzahl: Das erste Argument gibt an, wie oft die Spurliste wiederholt werden soll. Es wird mit einem ganzzahligen Wert von 1 oder mehr angegeben oder mit den Schlüsselwortwerten
auto-fill
oderauto-fit
. Diese Schlüsselwortwerte wiederholen die Menge der Spuren so oft, wie es nötig ist, um den Grid-Container zu füllen. - Spuren: Das zweite Argument gibt die Menge der zu wiederholenden Spuren an. Grundsätzlich besteht es aus einem oder mehreren Werten, wobei jeder Wert die Größe dieser Spur repräsentiert. Jede Größe wird entweder mit einem
<track-size>
-Wert oder einem<fixed-size>
-Wert angegeben. Sie können auch einen oder mehrere Liniennamen vor oder nach jeder Spur angeben, indem Sie<line-names>
-Werte vor und/oder nach der Spurgröße bereitstellen.
Wenn Sie auto-fill
oder auto-fit
verwenden, um die Wiederholungsanzahl festzulegen, dürfen Sie nur Spurgrößen mit dem Typ <fixed-size>
und nicht mit dem Typ <track-size>
angeben. Dies gibt uns drei Hauptsyntaxformen für repeat()
:
<track-repeat>
, das verwendet:- eine ganze Zahl, um die Wiederholungsanzahl festzulegen
<track-size>
-Werte, um die Spurgrößen festzulegen.
<auto-repeat>
, das verwendet:auto-fill
oderauto-fit
, um die Wiederholungsanzahl festzulegen<fixed-size>
, um die Spurgrößen festzulegen.
<fixed-repeat>
, das verwendet:- eine ganze Zahl, um die Wiederholungsanzahl festzulegen
<fixed-size>
-Werte, um die Spurgrößen festzulegen.
Wenn eine Eigenschaftsdeklaration <auto-repeat>
verwendet, ist es nur erlaubt, <fixed-repeat>
für zusätzliche repeat()
-Aufrufe zu verwenden. Zum Beispiel ist dies ungültig, da es die <auto-repeat>
-Form mit der <track-repeat>
-Form kombiniert:
.wrapper {
grid-template-columns:
repeat(auto-fill, 10px)
repeat(2, minmax(min-content, max-content));
}
Es gibt eine vierte Form, <name-repeat>
, die verwendet wird, um Liniennamen zu Subgrids hinzuzufügen. Diese wird nur mit dem subgrid
-Schlüsselwort verwendet und spezifiziert nur Liniennamen, keine Spurgrößen.
Werte
<fixed-size>
-
Eine der folgenden Formen:
- ein
<length-percentage>
-Wert - eine
minmax()
-Funktion mit:min
, angegeben als ein<length-percentage>
-Wertmax
, angegeben als ein<length-percentage>
-Wert, ein<flex>
-Wert oder eines der folgenden Schlüsselwörter:min-content
,max-content
oderauto
- eine
minmax()
-Funktion mit:min
, angegeben als ein<length-percentage>
-Wert oder eines der folgenden Schlüsselwörter:min-content
,max-content
oderauto
max
, angegeben als ein<length-percentage>
-Wert.
- ein
<flex>
-
Eine nicht-negative Dimension mit der Einheit
fr
, die den Flex-Faktor der Spur angibt. Jede<flex>
-große Spur nimmt einen Anteil des verbleibenden Raumes proportional zu ihrem Flex-Faktor ein. <length>
-
Eine positive Ganzzahllänge.
<line-names>
-
Null oder mehr
<custom-ident>
-Werte, durch Leerzeichen getrennt und in eckige Klammern eingeschlossen, wie folgt:[first header-start]
. <percentage>
-
Ein nicht-negativer Prozentsatz relativ zur Inline-Größe des Grid-Containers bei Spalten-Spuren und zur Blockgröße des Grid-Containers bei Reihen-Spuren. Wenn die Größe des Grid-Containers von der Größe seiner Spuren abhängt, muss der
<percentage>
alsauto
behandelt werden. Der User-Agent kann die intrinsischen Größenbeiträge der Spur an die Größe des Grid-Containers anpassen und die endgültige Größe der Spur um den minimalen Betrag erhöhen, der erforderlich wäre, um den Prozentsatz zu ehren. <track-size>
-
Eine der folgenden Formen:
- ein
<length-percentage>
-Wert, ein<flex>
-Wert oder eines der folgenden Schlüsselwörter:min-content
,max-content
oderauto
- eine
minmax()
-Funktion mit:min
, angegeben als ein<length-percentage>
-Wert oder eines der folgenden Schlüsselwörter:min-content
,max-content
oderauto
max
, angegeben als ein<length-percentage>
-Wert, ein<flex>
-Wert oder eines der folgenden Schlüsselwörter:min-content
,max-content
oderauto
- eine
fit-content()
-Funktion, der ein<length-percentage>
-Wert übergeben wird.
- ein
auto
-
Als Maximum identisch zu
max-content
. Als Minimum repräsentiert es die größte Mindestgröße (wie durchmin-width
/min-height
angegeben) der Grid-Elemente, die die Grid-Spur belegen. auto-fill
-
Wenn der Grid-Container eine bestimmte oder maximale Größe in der relevanten Achse hat, dann ist die Anzahl der Wiederholungen die größtmögliche positive Ganzzahl, die nicht dazu führt, dass das Grid seinen Grid-Container überläuft. Jede Spur wird als ihre maximale Spurzgrößenfunktion behandelt (jeder unabhängige Wert, der verwendet wird, um
grid-template-rows
odergrid-template-columns
zu definieren), falls diese bestimmt ist. Andernfalls als ihre minimale Spurzgrößenfunktion, wobei der Abstand zwischen den Gittern berücksichtigt wird. Wenn jede Anzahl von Wiederholungen überlaufen würde, dann ist die Wiederholung1
. Andernfalls, wenn der Grid-Container eine bestimmte Mindestgröße in der relevanten Achse hat, ist die Anzahl der Wiederholungen die kleinstmögliche positive Ganzzahl, die dieses Mindestkriterium erfüllt. Andernfalls wird die angegebene Spurliste nur einmal wiederholt. auto-fit
-
Verhält sich genauso wie
auto-fill
, außer dass alle leeren wiederholten Spuren nach dem Platzieren der Gitterelemente zusammengeklappt werden. Eine leere Spur ist eine, in die keine in-Fluss-Gitterelemente eingefügt oder darüber hinaus platziert werden. (Dies kann dazu führen, dass alle Spuren zusammengeklappt werden, wenn sie alle leer sind.)Eine zusammengeklappte Spur wird als hätte sie eine einzelne feste Spurzgrößenfunktion von
0px
behandelt, und die Abstände auf beiden Seiten davon kollabieren.Für den Zweck, die Anzahl der automatisch wiederholten Spuren zu finden, rundet der User-Agent die Spurgröße auf einen vom User-Agent spezifizierten Wert (z.B.
1px
) ab, um eine Division durch Null zu vermeiden. max-content
-
Repräsentiert den größten max-content-Beitrag der Gitterelemente, die die Grid-Spur belegen.
min-content
-
Repräsentiert den größten min-content-Beitrag der Gitterelemente, die die Grid-Spur belegen.
Formale Syntax
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
<fixed-breadth> =
<length-percentage [0,∞]>
Beispiele
Festlegen von Grid-Spalten mit repeat()
HTML
<div id="container">
<div>This item is 50 pixels wide.</div>
<div>Item with flexible width.</div>
<div>This item is 50 pixels wide.</div>
<div>Item with flexible width.</div>
<div>Inflexible item of 100 pixels width.</div>
</div>
CSS
#container {
display: grid;
grid-template-columns: repeat(2, 50px 1fr) 100px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Grid Layout Module Level 2 # repeat-notation |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
repeat() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.