CSS/Eigenschaften/grid-row

Die Eigenschaft grid-row ist die Zusammenfassung der Eigenschaften grid-row-start und grid-row-end, die durch einen Slash (/) getrennt werden.
Sie legt Größe und Position innerhalb der grid row fest, indem vertikaler Beginn und Ende der grid-area festgelegt wird.
Der Slash kann zusammen mit der End-Zeile weggelassen werden. Wenn dann die Start-Zeile eine <custom-ident> ist, wird die End-Zeile ebenfalls auf diese Ident gesetzt. Andernfalls wird auto verwendet.

Erlaubte Werte

• auto: entspricht einer automatischen Platzierung mit dem Schlüsselwort span und einem Standardwert 1
• <custom-ident>: ein Name, dessen Positionierung von grid-template-areas näher bestimmt wird.
• eine Ganzzahl. Negative Werte zählen vom Ende des expliziten Grids her (d. h. automatisch erzeugte Zeilen werden nicht beachtet)
• ein <custom-ident>-Name, optional um eine ganzzahlige Zahl erweitert, falls Sie mehrere Rasterlinien gleichen Namens haben.
• das Schlüsselwort span und ein <custom-ident>-Name oder eine ganzzahlige Zahl oder beides

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

• auto

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

nav {
  grid-column: 1 / -1;
  grid-row:    2 / 3;
}

Die Navigation beginnt an der zweiten horizontalen Rasterlinie und endet an der dritten Rasterlinie (zweite Reihe). Sie erstreckt sich über die gesamte zweite Reihe, da die Linien von links nach rechts gezählt werden; negative Werte jedoch rechts beginnen.

Siehe auch

• CSS/Tutorials/Grid/Grid-Items#Anfangs- und Endlinien festlegen

Weblinks

• W3C: grid-row