CSS/Wertetypen/Funktionen/repeat

Aus SELFHTML-Wiki
< CSS‎ | Wertetypen‎ | Funktionen(Weitergeleitet von Repeat())
Wechseln zu: Navigation, Suche

Die repeat()-Funktion ist eine CSS-Funktion, die ein Teil einer track list beschreibt, dass dann wiederholt erzeugt wird. Die Funktion wird in den CSS Grid Eigenschaften grid-template-columns und grid-template-rows verwendet.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Syntax

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

  • <positive-integer>: ganzzahlige Zahl, die Anzahl der Wiederholungen angibt
  • auto-fill: Anstelle einer festen Angabe richtet sich die Anzahl der Spalten nach dem verfügbaren Platz
  • auto-fit
  • <track-list>: Festlegung einer Spalte oder Zeile - folgende Werte und Funktionen sind möglich:
    • nicht-negative Längenangabe oder nicht-negativer Prozentwert
    • <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

Anwendungsbeispiele[Bearbeiten]

Grundprinzip[Bearbeiten]

Beispiel: Grundraster mit 4 Hauptspalten
grid-template-columns: 10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end] 10px;

/* same as above, except easier to write */
grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px;
In diesem Beispiel aus der Spec werden oben vier Spalten mit gleichen Werten festgelegt. Im unteren Beispiel wird das gleiche Raster mit repeat() erzeugt. Innerhalb der Klammer befindet sich die Anzahl der Wiederholungen, nach einem Komma gefolgt von der Angabe einer Spalte mit 250px Breite und einem Spaltenabstand (gutter) von je 10px Breite.

Grundraster mit unterschiedlich breiten Spalten[Bearbeiten]

Beispiel: Grundraster mit unterscheidlich breiten Spalten ansehen …
#container {
  display: grid;
  grid-template-columns: repeat(2, 3em 1fr) 10em;
  grid-gap: 10px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #866a00 ;
  padding: 10px;
}

#container > div {
  background-color: #dfac20;
  padding: 5px;
}
Im Raster werden mit grid-template-columns Spalten erzeugt. Dafür wird zum einen die repeat()-Funktion verwendet, die zweimal je eine 3em und eine flexible Spalten (mit 1fr) erzeugt. Diese Spalten sind wie auch die letzte Spalte mit 10em Breite Leerzeichen-separiert. Zwischen den Spalten wurde mit grid-gap ein (Spalten-) Abstand von 10px festgelegt.

Weblinks[Bearbeiten]