CSS/Eigenschaften/grid-template-rows

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft grid-template-rows legt Anzahl und Größen der Zeilen fest (track sizing functions).

erlaubte Werte
  • none
  • eine <track-list>
  • eine <auto-track-list

Die Werte entsprechen einer Leerzeichen-separierten Liste von:

  • positiven Längenangaben oder Prozentwerten
  • <flex> der 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 Funktion fit-content(<länge> | <prozentwert> ] ),
  • die Funktion repeat([ <positive-integer> | auto-fill | auto-fit ] , <track-list> ), die es ermöglicht eine Anzahl von gleichen Zeilen in einem track zu definieren.
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: * none
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar nein
Beispiel
body {
  grid-template-rows: 200px 500px 200px; 
}
body {
  display: grid;
  grid-template-rows: repeat(12, 1fr); 
}
Im oberen Teil besteht der body aus 3 Zeilen, von denen die mittlere statt 200px aber 500px hoch ist; die zweite Festlegung verwendet die repeat()-Funktion, die 12 gleichhohe Zeilen erzeugt.
Beachten Sie: IE10 und IE 11 verwenden eine ältere Spezifikation, in der diese Eigenschaft unter dem Namen -ms-grid-rows implementiert ist.
Auch ohne Angabe dieser Eigenschaft verteilt sich der vorhandene Inhalt über das Raster, indem er die Zeilen Spalte für Spalte füllt.

Weblinks

Siehe auch