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 stellt ein wiederholtes Fragment der Track-Liste dar und ermöglicht es, eine große Anzahl von Spalten oder Zeilen, die ein wiederkehrendes Muster aufweisen, in kompakterer Form darzustellen.

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:

  • Wiederholungsanzahl: Das erste Argument gibt die Anzahl an, wie oft die Track-Liste 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 Tracks so oft wie nötig, um den Grid-Container auszufüllen.
  • Tracks: Das zweite Argument spezifiziert die Menge der Tracks, die wiederholt werden. Fundamentell besteht dies aus einem oder mehreren Werten, wobei jeder Wert die Größe dieses Tracks darstellt. Jede Größe wird entweder mit einem <track-size>-Wert oder einem <fixed-size>-Wert angegeben. Sie können ein oder mehrere Liniennamen vor oder nach jedem Track angeben, indem Sie <line-names>-Werte vor und/oder nach der Track-Größe angeben.

Wenn Sie auto-fill oder auto-fit verwenden, um die Wiederholungsanzahl festzulegen, dürfen Sie Track-Größen nur mit dem Typ <fixed-size> angeben, nicht mit dem Typ <track-size>. Dies gibt uns drei Hauptsyntax-Formen für repeat():

  • <track-repeat>, das verwendet:
    • eine Ganzzahl, um die Wiederholungsanzahl festzulegen
    • <track-size>-Werte zur Festlegung von Track-Größen.
  • <auto-repeat>, das verwendet:
  • <fixed-repeat>, das verwendet:
    • eine Ganzzahl, um die Wiederholungsanzahl festzulegen
    • <fixed-size>-Werte zur Festlegung von Track-Größen.

Wenn eine Eigenschaften-Deklaration <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. Sie wird nur mit dem Schlüsselwort subgrid verwendet und spezifiziert nur Liniennamen, nicht Track-Größen.

Werte

<fixed-size>

Eine der folgenden Formen:

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor des Tracks angibt. Jeder <flex>-große Track nimmt einen Anteil des verbleibenden Raumes proportional zu seinem Flex-Faktor ein.

<length>

Eine positive ganze Zahl als Länge.

<line-names>

Null oder mehr <custom-ident>-Werte, durch Leerzeichen getrennt und in eckigen Klammern eingeschlossen, wie folgt: [first header-start].

<percentage>

Ein nicht-negativer Prozentsatz relativ zur Inline-Größe des Grid-Containers in Spaltengrid-Tracks und zur Blockgröße des Grid-Containers in Reihengrid-Tracks. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, muss das <percentage> als auto behandelt werden. Der User-Agent kann die intrinsischen Größenbeiträge des Tracks zur Größe des Grid-Containers anpassen und die endgültige Größe des Tracks um das Minimum erhöhen, das erforderlich wäre, um den Prozentsatz zu erfüllen.

<track-size>

Eine der folgenden Formen:

auto

Als Maximum identisch mit max-content. Als Minimum repräsentiert es die größte Mindestgröße (wie durch min-width/min-height angegeben) der Grid-Elemente, die den Grid-Track 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. Behandelt jeden Track als seine maximale Track-Größe-Funktion (jeder unabhängige Wert, der verwendet wird, um grid-template-rows oder grid-template-columns zu definieren), falls dieser bestimmt ist. Andernfalls, als seine minimale Track-Größe-Funktion, unter Berücksichtigung von grid-gap. 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 diese Mindestanforderung erfüllt. Andernfalls wiederholt sich die angegebene Track-Liste nur einmal.

auto-fit

Verhält sich gleich wie auto-fill, außer dass alle leeren wiederholten Tracks nach dem Platzieren der Grid-Elemente zusammengeklappt werden. Ein leerer Track ist einer ohne im Fluss befindliche Grid-Elemente, die darin platziert oder darüber gespannt sind. (Dies kann dazu führen, dass alle Tracks zusammengeklappt werden, wenn sie alle leer sind.)

Ein zusammengeklappter Track wird als eine einzelne feste Track-Größe-Funktion von 0px behandelt, und die Rinnen auf beiden Seiten davon kollabieren.

Für die Berechnung der Anzahl autodurchgeführter Tracks rundet der User-Agent die Track-Größe auf einen vom User-Agenten angegebenen Wert (z.B. 1px) ab, um eine Division durch Null zu vermeiden.

max-content

Repräsentiert den größten max-content-Beitrag der Grid-Elemente, die den Grid-Track belegen.

min-content

Repräsentiert den größten min-content-Beitrag der Grid-Elemente, die den Grid-Track belegen.

Formelle 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

Grid-Spalten mit repeat() spezifizieren

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

BCD tables only load in the browser

Siehe auch