CSS/Eigenschaften/grid-column

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft grid-column ist die Zusammenfassung der Eigenschaften grid-column-start und grid-column-end, die durch den Slash getrennt werden.
Sie legt Größe und Position innerhalb der grid column fest, indem horizontaler Beginn und Ende der grid-area festgelegt wird..

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 ganzzahlige Zahl
  • ein <custom-ident>-Name und eine ganzzahlige Zahl
  • das Schlüsselwort span und ein <custom-ident>-Name oder eine ganzzahlige Zahl oder beides
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: * auto
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar nein
Beispiel
nav {
  grid-column: 1 / -1;
  grid-row:    2 / 3;
}
Die Navigation beginnt an der ersten vertikalen Rasterlinie und endet an der letzten Rasterlinie (negative Werte zählen von rechts). Sie erstreckt sich über die zweite Reihe.
Beachten Sie: Für die Browser IE10, IE 11 benötigen Sie den vendorprefix -ms-.

Weblinks