repeat()

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.

/* <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 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 Spuren so oft wie nötig, um den Gittercontainer auszufüllen.
• Spuren: Das zweite Argument gibt die Gruppe von Spuren an, die wiederholt werden. Grundsätzlich besteht diese aus einem oder mehreren Werten, wobei jeder Wert die Größe dieser Spur darstellt. 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 angeben.

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

• <track-repeat>, das verwendet:
  • eine ganze Zahl, um die Wiederholungsanzahl festzulegen
  • <track-size>-Werte, um Spurgrößen festzulegen.
• <auto-repeat>, das verwendet:
  • auto-fill oder auto-fit, um die Wiederholungsanzahl festzulegen
  • <fixed-size>, um Spurgrößen festzulegen.
• <fixed-repeat>, das verwendet:
  • eine ganze Zahl, um die Wiederholungsanzahl festzulegen
  • <fixed-size>-Werte, um 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. Sie wird nur mit dem subgrid-Schlüsselwort verwendet und gibt nur Liniennamen an, keine Spurgrößen.

<fixed-size>

Eine der folgenden Formen:

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

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

<length>

Eine positive ganze 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 Spaltengrößen und zur Blockgröße des Grid-Containers in Zeilengrößen. Wenn die Größe des Gittercontainers von der Größe seiner Spuren abhängt, muss der <percentage> als auto behandelt werden. Der User-Agent kann die intrinsische Größenbeiträge der Spur zur Größe des Gittercontainers anpassen und die endgültige Größe der Spur um den Mindestbetrag erhöhen, der erforderlich ist, um den Prozentsatz zu respektieren.

<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, angegeben als <length-percentage>-Wert oder eines der folgenden Schlüsselwörter: min-content, max-content oder auto
  • max, angegeben als <length-percentage>-Wert, ein <flex>-Wert oder eines der folgenden Schlüsselwörter: min-content, max-content oder auto
• eine fit-content()-Funktion, die einen <length-percentage>-Wert übergeben bekommt.

auto

Als Maximum identisch zu max-content. Als Minimum repräsentiert es die größte Minimalgröße (wie durch min-width/min-height angegeben) der Gitterelemente, die die Gitterspur belegen.

auto-fill

Wenn der Gittercontainer eine bestimmte oder maximale Größe in der relevanten Achse hat, ist die Anzahl der Wiederholungen die größte mögliche positive ganze Zahl, die nicht dazu führt, dass das Gitter seinen Gittercontainer überläuft. Jede Spur wird als ihre maximale Spurnierungsfunktion behandelt (jeder unabhängige Wert, der verwendet wird, um grid-template-rows oder grid-template-columns zu definieren), wenn diese bestimmt ist. Andernfalls als ihre minimale Spurnierungsfunktion, unter Berücksichtigung des Gitterabstands. Wenn jede Anzahl von Wiederholungen zu einem Überlauf führen würde, ist die Anzahl der Wiederholungen 1. Andernfalls, wenn der Gittercontainer eine bestimmte minimale Größe in der relevanten Achse hat, ist die Anzahl der Wiederholungen die kleinste positive ganze Zahl, die diese Mindestanforderung erfüllt. Andernfalls wird die angegebene Spurliste nur einmal wiederholt.

auto-fit

Verhält sich wie auto-fill, außer dass nach dem Platzieren der Gitterelemente alle leeren wiederholten Spuren zusammengeklappt werden. Eine leere Spur ist eine, in der keine im Fluss befindlichen Gitterelemente platziert oder die darüber hinausgehen. (Dies kann dazu führen, dass alle Spuren zusammengeklappt werden, wenn alle leer sind.)

Eine zusammengeklappte Spur wird als eine einzelne feste Spurnierungsfunktion von 0px behandelt, und die Rinnen auf beiden Seiten davon kollabieren.

Für den Zweck, die Anzahl der auto-wiederholten Spuren zu bestimmen, deckt der User-Agent die Spurgröße auf einen vom User-Agent bestimmten Wert (z.B. 1px), um eine Division durch Null zu vermeiden.

max-content

Repräsentiert den größten max-content-Beitrag der Gitterelemente, welche die Gitterspur belegen.

min-content

Repräsentiert den größten min-content-Beitrag der Gitterelemente, welche die Gitterspur belegen.

<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,∞]>  

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

• grid-template
• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• Linienbasierte Platzierung mit CSS Grid
• Grid-Template-Bereiche: Gitter-Definition Abkürzungen