CSS/Eigenschaften/grid-row

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Weblinks