CSS repeat() Funktion

Definition und Verwendung

CSS repeat() Funktion wird verwendet, um eine Gruppe von Spalten oder Zeilen im Gitter zu wiederholen.

Wenn Ihr Gitter viele Zeilen oder Spalten hat, ist diese Funktion sehr nützlich. Mit dieser Funktion können Sie ein "Wiederholmuster" erstellen, das verwendet werden kann.

Diese Funktion ist mit grid-template-columns Eigenschaften und grid-template-rows Attribute zusammen verwenden.

Beispiel

Beispiel 1

Verwenden Sie repeat() Eine Gruppe von Spalten im Gitter wiederholen:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Versuchen Sie es selbst

Beispiel 2

Verwenden Sie repeat() Eine Gruppe von Spalten im Gitter wiederholen:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Versuchen Sie es selbst

CSS-Syntax

repeat(repeat-count, tracks)
Wert Beschreibung
repeat-counts

Erforderlich. Spezifiziert die Anzahl der Wiederholungen der Spalten oder Zeilen.

Kann eine natürliche Zahl größer als 1 oder die Schlüsselwörter auto-fill oder auto-fit sein (sie wiederholen Spalten/Zeilen nach Bedarf, um den Grid-Container auszufüllen).
tracks

Erforderlich. Spezifiziert wiederholte Spalten oder Zeilenmengen. Folgende Werte können verwendet werden:

  • Längenwerte (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Benannte Linien

Technische Details

Version: CSS Grid Layout Modul Level 2

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste vollständige Version des Browsers dar, die diese Funktion unterstützt.

Chrome Edge Firefox Safari Oper
57 16 76 10.1 44

Verwandte Seiten

Referenz:CSS grid-template-columns Eigenschaft

Referenz:CSS grid-template-rows Eigenschaft