CSS -Rasterelement
1
2
3
4
5
Untergeordnete Elemente (Elemente)
Ein Grid- Container enthält Grid -Elemente .
Standardmäßig hat ein Container ein Rasterelement für jede Spalte in jeder Zeile, aber Sie können die Rasterelemente so gestalten, dass sie sich über mehrere Spalten und/oder Zeilen erstrecken.
Die Grid-Column-Eigenschaft:
Die grid-columnEigenschaft definiert, auf welche Spalte(n) ein Element platziert werden soll.
Sie definieren, wo das Element beginnt und wo das Element endet.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
fünfzehn
Hinweis: Die grid-columnEigenschaft ist eine Kurzformeigenschaft für die grid-column-startund die grid-column-endEigenschaften.
Um ein Element zu platzieren, können Sie sich auf Zeilennummern beziehen oder das Schlüsselwort „span“ verwenden, um festzulegen, wie viele Spalten das Element umfassen soll.
Beispiel
Lassen Sie "item1" in Spalte 1 beginnen und vor Spalte 5 enden:
.item1 {
grid-column: 1 / 5;
}
Beispiel
Lassen Sie "item1" in Spalte 1 beginnen und 3 Spalten umfassen:
.item1 {
grid-column: 1 / span 3;
}
Beispiel
Lassen Sie "item2" in Spalte 2 beginnen und 3 Spalten umfassen:
.item2 {
grid-column: 2 / span 3;
}
Die Grid-Row-Eigenschaft:
Die grid-rowEigenschaft definiert, in welcher Zeile ein Element platziert werden soll.
Sie definieren, wo das Element beginnt und wo das Element endet.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
fünfzehn
16
Hinweis: Die grid-rowEigenschaft ist eine Kurzformeigenschaft für die grid-row-startund die grid-row-endEigenschaften.
Um ein Element zu platzieren, können Sie sich auf Zeilennummern beziehen oder das Schlüsselwort "span" verwenden, um zu definieren, wie viele Zeilen das Element umfassen soll:
Beispiel
Lassen Sie "item1" auf Zeilenzeile 1 beginnen und auf Zeilenzeile 4 enden:
.item1 {
grid-row: 1 / 4;
}
Beispiel
Lassen Sie "item1" in Zeile 1 beginnen und sich über 2 Zeilen erstrecken:
.item1 {
grid-row: 1 / span 2;
}
Die Grid-Area-Eigenschaft
Die grid-areaEigenschaft kann als Kurzformeigenschaft für die
Eigenschaften , und grid-row-startverwendet grid-column-startwerden .grid-row-endgrid-column-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
fünfzehn
Beispiel
Lassen Sie "item8" auf Zeilenzeile 1 und Spaltenzeile 2 beginnen und auf Zeilenzeile 5 und Spaltenzeile 6 enden:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Beispiel
Lassen Sie "item8" auf Zeilenzeile 2 und Spaltenzeile 1 beginnen und sich über 2 Zeilen und 3 Spalten erstrecken:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Rasterelemente benennen
Die grid-areaEigenschaft kann auch verwendet werden, um Rasterelementen Namen zuzuweisen.
Header
Speisekarte
Hauptsächlich
Richtig
Fusszeile
Auf benannte Grid-Elemente kann über die grid-template-areasEigenschaft des Grid-Containers verwiesen werden.
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 {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Jede Zeile wird durch Apostrophe (' ') definiert.
Die Spalten in jeder Zeile werden innerhalb der Apostrophe definiert, getrennt durch ein Leerzeichen.
Hinweis: Ein Punktzeichen steht für ein Rasterelement ohne Namen.
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 {
grid-template-areas: 'myArea myArea
. . .';
}
Um zwei Zeilen zu definieren, definieren Sie die Spalte der zweiten Zeile innerhalb eines anderen Satzes von Apostrophen:
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';
}
Die Reihenfolge der Artikel
Das Rasterlayout ermöglicht es uns, die Elemente an beliebiger Stelle zu positionieren.
Das erste Element im HTML-Code muss nicht als erstes Element im Raster erscheinen.
1
2
3
4
5
6
Beispiel
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Sie können die Reihenfolge für bestimmte Bildschirmgrößen ändern, indem Sie Medienabfragen verwenden:
Beispiel
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}