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:

• 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üsselwörtern auto-fill oder auto-fit. Diese Schlüsselwörter wiederholen das Set von Spuren so oft, wie es nötig ist, um den Grid-Container zu füllen.
• Spuren: Das zweite Argument gibt das Set von Spuren an, das wiederholt wird. Im Wesentlichen besteht es 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 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 Ganzzahl, um die Wiederholungsanzahl festzulegen
  • <track-size>-Werte, um Spuren zu definieren.
• <auto-repeat>, das verwendet:
  • auto-fill oder auto-fit, um die Wiederholungsanzahl festzulegen
  • <fixed-size>, um Spuren zu definieren.
• <fixed-repeat>, das verwendet:
  • eine Ganzzahl, um die Wiederholungsanzahl festzulegen
  • <fixed-size>-Werte, um Spuren zu definieren.

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, weil 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 spezifiziert nur Liniennamen, keine Spurgrößen.

Werte

<fixed-size>

Eine der folgenden Formen:

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

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor der Spur angibt. Jede <flex>-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 bei Spalten-Spuren und zur Block-Größe des Grid-Containers bei Reihen-Spuren. Wenn die Größe des Grid-Containers von der Größe seiner Spuren abhängt, muss das <percentage> als auto behandelt werden. Der User-Agent kann die intrinsischen Größeneinträge der Spur an die Größe des Grid-Containers anpassen und die endgültige Größe der Spur um das minimale Maß vergrößern, das zur Erfüllung des Prozentsatzes erforderlich ist.

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

auto

Als Maximum identisch mit max-content. Als Minimum repräsentiert es die größte Mindestgröße (wie in min-width/min-height spezifiziert) 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, ist die Anzahl der Wiederholungen die größtmögliche positive ganze Zahl, die nicht dazu führt, dass das Grid seinen Container überschreitet. Jede Spur wird als ihre maximale Spurgrößenfunktion 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 Spurgrößenfunktion und unter Berücksichtigung des Grid-Abstands. Wenn jede Anzahl von Wiederholungen zu einem Überlauf führen 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 ganze Zahl, 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 zusammengeklappt werden. Eine leere Spur ist eine mit keinen im Fluss platzierten Grid-Elementen darin oder darüber gespannt. (Das kann dazu führen, dass alle Spuren zusammengeklappt werden, wenn sie alle leer sind.)

Eine zusammengeklappte Spur wird als eine einzige feste Spurgrößenfunktion von 0px behandelt, und die Nuten auf beiden Seiten davon werden zusammengeklappt.

Um die Anzahl der automatisch wiederholten Spuren zu finden, rundet der User-Agent die Spurgröße auf einen vom User-Agent festgelegten Wert (z. B. 1px) ab, um eine Division durch Null zu vermeiden.

max-content

Repräsentiert den größten Beitrag zum Max-Content der Grid-Elemente, die die Grid-Spur belegen.

min-content

Repräsentiert den größten Beitrag zum Min-Content der Grid-Elemente, 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

Spalten des Grids mit 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
• Linienbasierte Platzierung mit CSS Grid
• Grid-Template Bereiche: Grid-Definitions-Kurzformen