CSS/Eigenschaften/grid-column

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Grid-column-end)
Wechseln zu: Navigation, Suche

Die Eigenschaft grid-column ist die Zusammenfassung der Eigenschaften grid-column-start und grid-column-end, die durch einen Slash (/) getrennt werden.
Sie legt Größe und Position innerhalb der grid column fest, indem horizontaler Beginn und Ende der grid-area festgelegt wird.
Der Slash kann zusammen mit der End-Spalte weggelassen werden. Wenn dann die Start-Spalte eine <custom-ident> ist, wird die End-Spalte 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 Spalten 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 ersten vertikalen Rasterlinie und endet an der letzten Rasterlinie (negative Werte zählen von rechts). Sie erstreckt sich über die zweite Reihe.

Siehe auch

Weblinks