CSS/Eigenschaften/grid-template-rows

Die Eigenschaft grid-template-rows legt Anzahl, Größen und optional auch die Benennung von Zeilen fest

Erlaubte Werte

• none - alle Grid-Spalten werden implizit erzeugt
• eine track-list oder auto-track-list. Dabei handelt es sich um eine durch Leerzeichen getrennte Auflistung der Spaltenbreiten und der gewünschten Namen für Rasterlinien. Spaltenbreiten können einfache Maßangaben sein sowie die CSS-Funktionen minmax(), fit-content() und repeat(), die speziell für Grid-Templates eingeführt wurden und zusätzliche Möglichkeiten bieten.

Die vollständige Syntax dieser Liste ist komplex und wurde deshalb in einen eigenen Artikel ausgelagert.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

body {
  grid-template-rows: 2em 5em 2em; 
}
artice {
  display: grid;
  grid-template-rows: repeat(12, 1fr); 
}

Im oberen Teil besteht der body aus 3 Zeilen, von denen die mittlere statt 2em aber 5em hoch ist; die zweite Festlegung verwendet die repeat()-Funktion, die 12 gleichhohe Zeilen erzeugt.

Beachten Sie: Wenn die Grid-Elemente alle expliziten Reihen ausgefüllt haben, werden bei weiteren Eementen neue Zeilen implizit erzeugt und ihre Größe wird durch die Eigenschaft grid-auto-rows bestimmt.

Siehe auch

• CSS/Tutorials/Grid/Grid-Container#explizite Erzeugung

Weblinks

• W3C: Explicit Track Sizing
• MDN: grid-template-rows