CSS/Funktionen/repeat()

Browserunterstützung
caniuse.com

Die CSS-Funktion repeat() 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.

anwendbar auf

• grid-template-columns
• grid-template-rows

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>)

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.

Siehe auch

• CSS/Tutorials/Grid/Grid-Container repeat() - kürzer und übersichtlicher
• Benannte Linien - Mehrere Rasterlinien mit dem gleichen Namen

Weblinks

• CSSWG.org: Repeating Rows and Columns: the repeat() notation
• MDN: repeat()