CSS/Eigenschaften/grid-auto-rows

Browserunterstützung
caniuse.com

Die Eigenschaft grid-auto-rows legt Anzahl und Größe von impliziert erzeugten Zeilen fest (row track).

Erlaubte Werte

Eine oder mehrere Angaben für die Zeilenhöhe (durch Leerstellen getrennt).

• positive Längenangabe oder Prozentwert
• <flex>: Angabe eines nicht-negativen Bruchteils mit der Einheit fr (Fraction: engl. für Bruch)
• max-content Schlüsselwort, das den größten Inhaltsbeitrag des tracks kennzeichnet
• min-content Schlüsselwort, das den geringsten Inhaltsbeitrag des tracks kennzeichnet
• die Funktion minmax(min, max), die Mindest- und Maximalangaben angibt.
• auto, die sich am minimalen Bedarf des vorhandenen Inhalts ausrichtet

Die grid-auto-rows-Werte werden nacheinander für automatisch erzeugte Grid-Zeilen verwendet. Wenn der Browser mehr Zeilen erstellt, als Werte angegeben sind, beginnt er in der Liste wieder vor vorn.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

• auto

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

body {
  display: grid;
  grid-auto-rows: max-content
}

Wenn ein Grid-Element in einer Zeile positioniert wird, die nicht explizit durch grid-template-rows dimensioniert ist, werden implizite Grid-Tracks erstellt, um es aufzunehmen. Dies kann entweder durch explizite Positionierung in einer Zeile geschehen, die außerhalb des Bereichs liegt, oder durch den Auto-Placement-Algorithmus, der zusätzliche Zeilen erzeugt.
In diesem Beispiel werden die implizit erzeugten Reihen durch das Schlüsselwort max-content jeweils so hoch, wie ihr größter Inhalt.

Siehe auch

• CSS/Tutorials/Grid
  • Implizite und explizite Erzeugung
    Erzeugen von Spalten und Zeilen

Weblinks

• Spezifikation (W3C): grid-auto-rows
• MDN: grid-auto-rows
• Details: caniuse.com