CSS Grid-Column- Eigenschaft
Beispiel
Lassen Sie "item1" in Spalte 1 beginnen und 2 Spalten umfassen:
.item1 {
grid-column: 1 / span 2;
}
Definition und Verwendung
Die grid-column
Eigenschaft gibt die Größe und Position eines Rasterelements in einem Rasterlayout an und ist eine Kurzformeigenschaft für die folgenden Eigenschaften:
Standardwert: | Auto Auto |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS-Grid-Layout-Modul Stufe 1 |
JavaScript-Syntax: | Objekt .style.gridColumn="2 / Spannweite 2" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
grid-column | 57 | 16 | 52 | 10 | 44 |
CSS-Syntax
grid-column: grid-column-start /
grid-column-end;
Eigenschaftswerte
Value | Description |
---|---|
grid-column-start | Specifies on which column to start displaying the item. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
Mehr Beispiele
Beispiel
Sie können Spalten-Zeile-Werte anstelle der Anzahl der zu überspannenden Spalten verwenden:
.item1 {
grid-column: 1 / 3;
}
Verwandte Seiten
CSS-Tutorial: CSS-Grid-Layout