Grid Container
Grid Container sind der fundamentale Bestandteil des Grid-Layouts. Sie sind das übergeordnete Element über den Grid items. Der Contaienr gibt an, wie die Items angeordnet werden sollen.
Grid-Templates
Die grid-template eigenschaften können als "grid-template-columns" und als "grid-template-rows" verwendet werden. Die Anzahl der zur Eigenschaft hinzugefügten werten zeigt an, wie viele Reihen/Spalten gewünscht sind. Man kann diese auch spezifiezieren um so die Breite/Höhe zu bestimmen. Bei Dem Wert "auto" wird der Wert automatisch angepasst. Wenn alle den Wert "auto" besitzen teilen sich alle Spalten/Reihen gleichmäßig auf.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
p1
p2
p3
p4
p5
p6
p7
p8
p9
Dieses Beispiel erstellt ein grid mit 3 Spalten. Wenn zu der "grid-template-columns" Eigenschaft noch weitere Werte hinzugefügt werden würden, könnte man weitere Spalten erstellen.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 150px 100px 200px;
}
p1
p2
p3
p4
p5
p6
p7
p8
p9
Hier wird die "grid-template-rows" Eigenschaft verwendet um die Höhe der jeweiligen Reihen anzupassen.
Align/Justify Content
Die justify-content und align-content Eigenschafften sind dazu da, die grid items im grid container anzuordnen. Dabei ist justify-content dazu da, das gesammte grid auszurichten. Während align-content nur vertikal das grid anordnet
.grid-container {
display: grid;
grid-template-columns: 50px 50px 50px;
justify-content: space-evenly
}
p1
p2
p3
p4
p5
p6
Hier wird die "justify-content" Eigenschaft verwendet um die grid items gleichmäßig zu verteilen.
.grid-container {
display: grid;
grid-template-columns: 50px 50px 50px;
justify-content: center
}
p1
p2
p3
p4
p5
p6
p7
p8
p9
Hier wird die "justify-content" Eigenschaft verwendet um die grid items zu zentrieren.