CSS grid-column Eigenschaft
- Vorherige Seite grid-auto-rows
- Nächste Seite grid-column-end
Definition und Verwendung
Die grid-column-Eigenschaft legt die Größe und Position des Grid-Elements im Grid-Layout fest und ist eine Abkürzung für die folgenden Eigenschaften:
Weitere Informationen finden Sie unter:
CSS-Tutorial:CSS-Grid-Layout
Beispiel
Beispiel 1
Machen Sie "item1" in Spalte 1 beginnen und zwei Spalten überspannen:
.item1 {
grid-column: 1 / span 2;
}
Beispiel 2
Sie können Spaltenkantenwerte anstelle der Anzahl der zu überspannenden Spalten verwenden:
.item1 {
grid-column: 1 / 3;
}
CSS-Syntax
grid-column: grid-column-start / grid-column-end;
Attributwert
| Wert | Beschreibung |
|---|---|
| grid-column-start | Legt fest, ab welcher Spalte die Elemente angezeigt werden. |
| grid-column-end | Legt fest, an welcher Spaltenkante (column-line) die Anzeige der Elemente beendet wird, oder wie viele Spalten sie überspannt. |
Technische Details
| Standardwert: | auto / auto |
|---|---|
| Vererbung: | Nein |
| Animationserstellung: | Unterstützt. Siehe auch:Animationsspezifische Eigenschaften. |
| Version: | CSS Grid Layout Modul Level 1 |
| JavaScript-Syntax: | object.style.gridColumn="2 / span 2" |
Browser-Unterstützung
Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- Vorherige Seite grid-auto-rows
- Nächste Seite grid-column-end
