CSS grid-template-rows Eigenschaft

Definition und Verwendung

grid-template-rows legt die Anzahl der Reihen (und die Höhe) im Rasterlayout fest.

Die Werte sind eine durch Leerzeichen getrennte Liste, wobei jeder Wert die Höhe der entsprechenden Zeile angibt.

Weitere Informationen siehe:

CSS-Tutorial:CSS-Grid-Layout

CSS-Referenzhandbuch:grid-columns-Eigenschaft

CSS-Referenzhandbuch:grid-template-Eigenschaft

Beispiel

Legen Sie die row-size (Höhe) fest:

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Versuchen Sie es selbst

CSS-Syntax

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Eigenschaftswert

Wert Beschreibung
none Keine Größe festgelegt. Erstellen Sie bei Bedarf Zeilen.
auto Die Zeilengröße hängt von der Größe des Behälters und der Größe des Inhalts der Elemente in der Zeile ab.
max-content Setzen Sie die Zeilengröße jeder Zeile basierend auf der Größe des größten Elements in der Zeile.
min-content Setzen Sie die Zeilengröße jeder Zeile basierend auf der Größe des kleinsten Elements in der Zeile.
length Setzen Sie die Zeilengröße, indem Sie gültige Längenwerte verwenden. SieheLängenmaß.

Technische Details

Standardwert: none
Vererbung: Nein
Animationserstellung: Unterstützt. Siehe:Animationseigenschaften.
Version: CSS Grid Layout Modul Level 1
JavaScript-Syntax: object.style.gridTemplateRows="50px 200px"

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44