CSS Grid-Area- Eigenschaft
Beispiel
Lassen Sie "item1" in Zeile 2, Spalte 1 beginnen und sich über 2 Zeilen und 3 Spalten erstrecken:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die grid-area
Eigenschaft gibt die Größe und Position eines Rasterelements in einem Rasterlayout an und ist eine Kurzformeigenschaft für die folgenden Eigenschaften:
Die grid-area
Eigenschaft kann auch verwendet werden, um einem Rasterelement einen Namen zuzuweisen. Auf benannte Grid-Elemente kann dann über die
Eigenschaft grid-template-areas des Grid-Containers verwiesen werden. Siehe Beispiele unten.
Standardwert: | Auto / Auto / Auto / Auto |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS-Grid-Layout-Modul Stufe 1 |
JavaScript-Syntax: | Objekt .style.gridArea="1 / 2 / Spanne 2 / Spanne 3" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
CSS-Syntax
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Eigenschaftswerte
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
Mehr Beispiele
Beispiel
Item1 erhält den Namen "myArea" und erstreckt sich über alle fünf Spalten in einem fünfspaltigen Rasterlayout:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Beispiel
Lassen Sie "myArea" zwei Spalten in einem Rasterlayout mit fünf Spalten umfassen (Punktzeichen stehen für Elemente ohne Namen):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
Beispiel
Lassen Sie "item1" zwei Spalten und zwei Zeilen umfassen:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
Beispiel
Benennen Sie alle Elemente und erstellen Sie eine gebrauchsfertige Webseitenvorlage:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
Verwandte Seiten
CSS-Tutorial: CSS-Grid-Layout