repeat()

Probieren Sie es aus

grid-template-columns: repeat(2, 60px);

grid-template-columns: 1fr repeat(2, 60px);

grid-template-columns: repeat(2, 20px 1fr);

grid-template-columns: repeat(auto-fill, 40px);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

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 entgegen:

• Wiederholungsanzahl: Das erste Argument gibt an, wie oft die Spurenliste 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 Spurensätze so oft, wie es nötig ist, um den Grid-Container zu füllen.
• Spuren: Das zweite Argument spezifiziert das Set von Spuren, die wiederholt werden sollen. Im Wesentlichen besteht dies aus einem oder mehreren Werten, bei denen 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 vor oder nach jeder Spur ein oder mehrere Liniennamen 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 Spurgrößen nur mit dem Typ <fixed-size> angeben, nicht mit dem Typ <track-size>. 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 oder auto-fit, um die Wiederholungsanzahl festzulegen
  • <fixed-size> zur Festlegung der Spurgrößen.
• <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, darf diese nur <fixed-repeat> für zusätzliche repeat()-Aufrufe 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. Sie wird nur mit dem Schlüsselwort subgrid verwendet und spezifiziert nur Liniennamen, nicht Spurgrößen.

Werte

<fixed-size>

Eine der folgenden Formen:

• ein <length-percentage>-Wert
• eine minmax()-Funktion mit:
  • min als <length-percentage>-Wert angegeben
  • max als ein <length-percentage>-Wert, ein <flex>-Wert oder eines der folgenden Schlüsselwörter: min-content, max-content oder auto
• eine minmax()-Funktion mit:
  • min als <length-percentage>-Wert oder eines der folgenden Schlüsselwörter: min-content, max-content oder auto angegeben
  • max als <length-percentage>-Wert angegeben.

<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 Raums proportional zu ihrem Flex-Faktor ein.

<length>

Eine positive ganzzahlige 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 Spaltengridspuren und der Blockgröße des Grid-Containers in Reihengridspuren. 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 zur Größe des Grid-Containers anpassen und die endgültige Größe der Spur um den minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz zu erfüllen.

<track-size>

Eine der folgenden Formen:

• ein <length-percentage>-Wert, ein <flex>-Wert oder eines der folgenden Schlüsselwörter: min-content, max-content oder auto
• eine minmax()-Funktion mit:
  • min als <length-percentage>-Wert oder eines der folgenden Schlüsselwörter: min-content, max-content oder auto angegeben
  • max als <length-percentage>-Wert, ein <flex>-Wert oder eines der folgenden Schlüsselwörter: min-content, max-content oder auto angegeben
• eine fit-content()-Funktion, der ein <length-percentage>-Wert übergeben wird.

auto

Als Maximum identisch mit max-content. Als Minimum repräsentiert es die größte Mindestgröße (wie angegeben durch min-width/min-height) der Grid-Elemente, die die Grid-Spur belegen.

auto-fill

Wenn der Grid-Container eine festgelegte oder maximale Größe in der relevanten Achse hat, dann ist die Anzahl der Wiederholungen die größte mögliche positive Ganzzahl, die den Grid nicht über seinen Grid-Container hinaus überfließen lässt. Jede Spur wird in ihrer maximalen Spurgrößenfunktion behandelt (jeder unabhängige Wert, der verwendet wird, um grid-template-rows oder grid-template-columns zu definieren), sofern sie fest ist. Andernfalls als ihre minimale Spurgrößenfunktion und unter Berücksichtigung des grid-gap. Wenn jede Anzahl von Wiederholungen überfließen würde, beträgt die Wiederholung 1. Andernfalls, wenn der Grid-Container eine bestimmte minimale Größe in der relevanten Achse hat, ist die Anzahl der Wiederholungen die kleinste mögliche positive Ganzzahl, die diese Mindestanforderung erfüllt. Andernfalls wird die angegebene Spurenliste nur einmal wiederholt.

auto-fit

Verhält sich wie auto-fill, außer dass nach dem Platzieren der Grid-Elemente alle leeren wiederholten Spuren zusammengebrochen werden. Eine leere Spur ist eine, in die keine influssbaren Grid-Elemente platziert oder darüber gespannt werden. (Dies kann dazu führen, dass alle Spuren zusammenbrechen, wenn sie alle leer sind.)

Eine zusammengebrochene Spur wird als eine einzelne feste Spurgrößenfunktion von 0px behandelt, und die Rinnen auf jeder Seite davon kollabieren.

Zum Zweck der Berechnung der Anzahl von automatisch wiederholten Spuren setzt der User Agent die Spurgröße auf einen vom User Agent festgelegten Wert (z. B. 1px) ab, um Division durch Null zu vermeiden.

max-content

Stellt den größten max-content-Beitrag der Grid-Elemente dar, die die Grid-Spur belegen.

min-content

Stellt den größten min-content-Beitrag der Grid-Elemente dar, 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>? <track-size> ]+ <line-names>? )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<integer> = 
  <number-token>  

<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 mithilfe von repeat() spezifizieren

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

Browser-Kompatibilität

Siehe auch

• grid-template
• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• Linienbasiertes Platzieren mit CSS Grid
• Grid-Template-Bereiche: Kurzschreibweisen für Rasterdefinition