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

css
/* <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 oder auto-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:
  • <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:

css
.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:

<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> als auto 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:

auto

Als Maximum identisch zu max-content. Als Minimum repräsentiert es die größte Mindestgröße (wie durch min-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 oder grid-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 Wiederholung 1. 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

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

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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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.

Siehe auch