CSS Grid-Layouts
Mit CSS Grid Layout lassen sich komplette Seitenlayouts erstellen, bei denen Header, Sidebar, Hauptinhalte und Footer einfach kombiniert werden. Mit grid-template-areas bleibt das Layout übersichtlich und flexibel.
Seitenlayout mit Grid
Im folgenden Beispiel erstellen wir ein dreiteiliges Layout: Header, Sidebar, Hauptinhalt und Footer. Mit grid-template-areas definieren wir die Logik des Layouts einfach.
In diesem Beispiel erstrecken sich Header und Footer über die gesamte Breite, während Sidebar und Hauptinhalt in zwei Spalten aufgeteilt sind. Dies ist ein klassisches Seitenlayout.
Weitere Layout-Beispiele
Grid ist äußerst flexibel, sodass wir verschiedene Layouts erstellen können, wie z. B. Blogstrukturen, Admin-Oberflächen oder Mediengalerien.
Blog Layout
In einem Blog-Layout können neben den Hauptartikeln in der Sidebar Kategorien und Links angezeigt werden.
Dashboard Layout
In einem Dashboard-Layout können Diagramme, Statistiken und Karten übersichtlich mit Grid strukturiert werden.
Tipps zu Grid-Layouts
Grid-Layouts lassen sich leicht anpassen und responsive gestalten. Die einfachen Regeln sorgen dafür, dass die Seite auf jedem Gerät gut aussieht.
- Verwende grid-template-areas, um das Layout visuell nachvollziehbar zu machen.
- Kombiniere Grid mit Media Queries für volle Responsivität.
- Mit grid-gap kannst du ein sauberes und luftiges Layout erstellen.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
