CSS/Funktionen/repeat()

Die repeat()-Funktion beschreibt einen Teil einer Linienliste (track list), der dann wiederholt erzeugt wird. Linie oder track ist im Grid-Layout der Oberbegriff für Zeilen und Spalten..

Parameter	Syntax `repeat( <repeat-count>, <track-list> )` <repeat-count>: Angabe, wie die oft die Linienliste wiederholt werden soll. Dies kann sein: eine positive Ganzzahl: fester Wiederholfaktor. Die Linienliste darf `<flex-size>` Angaben enthalten. `auto-fill`: Die Linienliste wird so oft wiederholt, bis die maximale Größe des Grid-Containers erreicht ist. In der Linienliste dürfen nur `<fixed-size>`-Angaben gemacht werden! `auto-fit`: Ähnlich wie `auto-fill`, aber nachdem die Grid-Items platziert wurden, werden die Linien, in denen nichts platziert wurde, auf 0 zusammengeschoben. <track-list>: Festlegung der zu wiederholenden Linien. Die Linienliste wird so oft wie angegeben wiederholt und kann aus einer oder mehreren durch Leerzeichen getrennten Größenangaben bestehen. Die Größenangaben fallen in die Kategorien fixed-size oder flex-size. Vor, zwischen und nach den Größenangaben können Liniennamen notiert werden (wodurch mehrere Linien mit gleichem Namen entstehen). fixed-size: `<length-percentage>`: eine nicht-negative Längenangabe oder nicht-negativer Prozentwert minmax(), wobei min oder max ein `<length-percentage>`-Wert sein müssen. Der andere Wert kann eine `<length-percentage>`-Angabe sein, eine `<flex>`-Angabe oder eins der Schlüsselwörter `min-content`, `max-content` oder `auto` flex-size: <flex>: flexibler Bruchteil des Gesamtraums, ausgedrückt mit der Einheit fr max-content: richtet sich nach dem größten Inhaltsbeitrag aller Rasterelemente min-content: richtet sich nach dem kleinstmöglichen Inhaltsbeitrag aller Rasterelemente auto: entspricht im Maximum `max-content` - als Minimum wird die größte Minimalgröße (as specified by min-width/min-height) der Rasterelemente verwendet minmax(), wobei die Einschränkung auf mindestens eine `<length-percentage>`-Angabe entfällt fit-content(`<length-percentage>`)
anwendbar auf	* grid-template-columns grid-template-rows
Browsersupport	caniuse: {{{caniuse}}}

Beispiel

body {
  grid-template-columns: repeat(12, 1fr);
}

Der body erhält ein Raster mit 12 Spalten.

Beachten Sie: Die Verwendung von flex-size Angaben zusammen mit auto-fill oder auto-fit führt dazu, dass die entsprechende CSS-Eigenschaft vollständig ignoriert wird.