CSS grid-column-end Eigenschaft

Definition und Verwendung

Die grid-column-end-Eigenschaft bestimmt, wie viele Spalten das Element überbrücken soll, oder an welcher Spaltenlinie (column-line) das Element endet.

Siehe Beispiel am Ende der Seite.

Siehe auch:

CSS-Tutorial:CSS-Grid-Layout

Beispiel

Beispiel 1

Machen Sie "item1" über drei Spalten hinweg:

.item1 {
  grid-column-end: span 3;
}

Versuchen Sie es selbst

Beispiel 2

Sie können den Wert der Spaltenlinie anstelle der Anzahl der zu überquerenden Spalten verwenden:

.item1 {
  grid-column-end: 3;
}

Versuchen Sie es selbst

CSS-Syntax

grid-column-end: auto|span n|column-line;

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Das Element wird eine Spalte quer überbrücken.
span n Bestimmt die Anzahl der Spalten, die das Element quer überbrücken soll.
column-line Bestimmt, in welchem Spaltenbereich die Anzeige der Elemente endet.

Technische Details

Standardwert: auto
Vererbung: Nein
Animationserstellung: Unterstützt. Siehe auch:Animationsspezifische Eigenschaften.
Version: CSS Grid Layout Modul Level 1
JavaScript-Syntax: object.style.gridColumnEnd="5"

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44