Das CSS-Grid ist ein zweidimensionales Layout-System, das bei der Gestaltung komplexer, gitterbasierter Benutzeroberflächen hilfreich ist.
Zu den Vorteilen eines CSS-Grids zählt die Fähigkeit, Elemente sowohl horizontal als auch vertikal – innerhalb eines Grid-Containers – zu zentrieren.
Grid-Container: Horizontales Zentrieren
Verwenden Sie die Eigenschaft justify-content, um Elemente horizontal in einem CSS-Grid-Container zu zentrieren. Diese Eigenschaft nimmt mehrere Werte an, einschließlich center, start und end.
Durch das Setzen von justify-content: center; zentrieren Sie die Elemente innerhalb des Grid-Containers horizontal (waagerecht).
Code-Beispiel
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
justify-content: center;
}
In diesem Beispiel definiert die Klasse grid-container ein Gitter mit drei Spalten gleicher Breite und 20px Abständen dazwischen. Die Eigenschaft justify-content ist auf center gesetzt, was die Elemente innerhalb des Grid-Containers horizontal zentriert.
Grid-Container: Vertikales Zentrieren
Verwenden Sie die Eigenschaft align-items, um Elemente vertikal in einem CSS-Grid-Container zu zentrieren. Diese Eigenschaft nimmt ebenfalls mehrere Werte an, einschließlich center, start und end.
Durch das Setzen von align-items: center; zentrieren Sie die Elemente innerhalb des Grid-Containers vertikal (senkrecht).
Code-Beispiel
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 200px);
grid-gap: 20px;
justify-content: center;
align-items: center;
}
In diesem Beispiel definiert die Klasse grid-container ein Gitter mit drei Spalten gleicher Breite und drei Zeilen mit einer Höhe von 200px und 20px Abständen dazwischen. Die Eigenschaft justify-content ist auf center gesetzt, was die Elemente innerhalb des Grid-Containers horizontal zentriert. Die Eigenschaft align-items ist ebenfalls auf center gesetzt, was die Elemente innerhalb des Grid-Containers vertikal zentriert.
Grid-Elemente: Zentrieren
Es kann vorkommen, dass Sie nur bestimmte Elemente innerhalb eines CSS-Grid-Containers zentrieren möchten. Verwenden Sie in diesem Fall die Eigenschaften justify-self und align-self.
Diese Eigenschaften ermöglichen es Ihnen, das Verhalten einzelner Elemente auch innerhalb des Grid-Containers zu definieren.
Code-Beispiel
.grid-item:nth-child(2) {
justify-self: center;
align-self: center;
}
In diesem Beispiel wird das zweite Element innerhalb des Grid-Containers horizontal und vertikal zentriert, indem justify-self auf center und align-self auf center gesetzt werden.
Zusammenfassung
CSS-Grid bietet viele Möglichkeiten, Elemente innerhalb eines Grid-Containers zu zentrieren. Egal, ob Sie Elemente horizontal, vertikal oder beides zentrieren möchten, CSS-Grid bietet die notwendigen Werkzeuge, um das gewünschte Ergebnis zu erzielen.
