Allgemeines
Das Grid-Layout ermöglicht es Websiten einfacher zu gestalten, indem Reihen und Spalten genutzt und ineinander verschachtelt werden können, um die Objeket der Seite so anzuordnen, wie es gewünscht wird.
Display Eigenschaft
Ein HTML element wird zu einem Grid-Container, wenn die "display"-Eigenschaft auf "grid" oder "inline-grid" gesetzt ist. Alle untergeordneten Elemente des Containers, werden automatisch "grid items".
.grid-container {
display: grid;
}
.grid-container {
display: inline-grid;
}
Grid Reihen und Spalten
Die Vertikalen Linien eines grid items nennt man Spalten und die horizontalen Linien nennt man Reihen.
p1
p2
p3
p4
p5
Eine optisch angeordnete Reihe von P-Elementen.
p1
p2
p3
p4
p5
Eine optisch angeordnete Spalte von P-Elementen.
Grid Linien
Die sogenannten "grid lines" sind die Linien zwischen den grid items im grid container. Die Linien zwischen Reihen nennt man "row lines" und die Linien zwischen Spalten nennt man "column lines". Man kann die Linien ansprechen um items im Grid-Container gezielt zu platzieren.
.p1 {
grid-column-start: 1;
grid-column-end: 3;
}
p1
p2
p3
p4
p5
p6
p7
p8
Der p1 Container fängt hier bei der "column line" 1 ganz links an und hört bei der "column line" 3 auf.