CSS/Eigenschaften/grid-column

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

• CSS/Tutorials/Grid
  • Implizite und explizite Erzeugung
    Anfangs- und Endlinien festlegen

Weblinks

• W3C: grid-column