CSS grid-row-Eigenschaft

Definition und Verwendung

Die grid-row-Eigenschaft legt die Größe und Position des Netzwerkprojekts im Layout fest und ist eine Kurzform der folgenden Eigenschaften:

Weitere Informationen:

CSS-Tutorial:CSS-Grid-Layout

Beispiel

Beispiel 1

Machen Sie "item1" in Zeile 1 beginnen und zwei Zeilen überspannen:

.item1 {
  grid-row: 1 / span 2;
}

Probieren Sie es selbst aus

Beispiel 2

Sie können Zeilenwert anstelle der zu überspannenden Zeilenanzahl verwenden:

.item1 {
  grid-row: 1 / 3;
}

Probieren Sie es selbst aus

CSS-Syntax

grid-row: grid-row-start / grid-row-end;

Attributwert

Wert Beschreibung
grid-row-start Bestimmt, ab welcher Zeile die Elemente angezeigt werden.
grid-row-end Bestimmt, an welcher Zeile die Anzeige der Elemente endet, oder wie viele Zeilen sie überspannt.

Technische Details

Standardwert: auto / auto
Vererbung: Nein
Animationserstellung: Unterstützt. Bitte lesen Sie weiter:Animationsspezifische Eigenschaften.
Version: CSS Grid Layout Modul Level 1
JavaScript-Syntax: object.style.gridRow="2 / span 2"

Browser-Unterstützung

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

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