Grid Item
Ein grid item ist ein objekt in einem grid container. Standartgemäß ist ein grid item genau über eine Spalte und Reihe breit. Man kann die grid items aber so gestalten, dass sie auch mehrere Spalten und Reihen breit/hoch sind.
Grid-column/row Eigenschaft
Mit der grid-row/grid-column Eigenschaft kann man genau bestimmen wie sich die grid items verhalten. Start und endpunkte mit grid-(column/row)-(start/end) festlegen. Oder aber den Anfanspunkt festlegen und bestimmenwie weit sich das bestimmte element ausbreiten darf.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.p1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.p4 {
grid-column: 1 / span 3;
}
p1
p2
p3
p4
Hier werden p1 und p4 jeweils so gestaltet das sie sich jeweils über mehrere Spalten/Reihen ausbreiten.
Grid-area Eigenschaft
Grid area kann als Shortcut für grid-row-start/end und grid-column-start/end genutzt werden.
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
.p1 {
grid-area: 1 / 2 / 4 / 4
}
p1
p2
p3
p4
p5
p6
p7
p8
p9
p10
p11
Bei diesem Beispiel nutzt p2 grid-area, um sich den Platz von eigentlich 5 weiteren p Elementen zu nehmen.
Grid Areas benennen
Es ist auch möglich die einzelnen Bereiche zu benennen und einzeln zuzuordnen, mit der "grid-template-areas" Eigenschaft.
#item5 { grid-area: header; }
#item6 { grid-area: nav; }
#item7 { grid-area: main; }
#item8 { grid-area: aside; }
#item9 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'nav main main main aside aside'
'nav footer footer footer footer footer';
gap: 10px;
}
header
nav
main
aside
footer
Hier wird mit Hilfe von grid-template-areas, direkt Bereiche erzeugt indem die Items in den Bereichen aufgerufen werden, in denen sie auftauchen sollen.