Holy-Grail-Layout mit Grid

Das Holy-Grail-Layout ist ein klassisches Webdesign-Muster: eine Seite über die volle Höhe mit Header, Footer und einem mittleren Bereich mit drei Spalten (linke Sidebar, Hauptinhalt, rechte Sidebar). Mit Floats war es berüchtigt schwierig; CSS Grid macht es trivial.

Definieren Sie das Layout mit benannten Template-Bereichen und Zeilen: grid-template-areas bildet die visuelle Struktur ab. Drei Spalten und drei Zeilen (der Header erstreckt sich über alle, der Footer ebenfalls, der mittlere Bereich enthält drei Spalten) bilden das gesamte Layout in einem gut lesbaren ASCII-Diagramm ab.

Jedes Kindelement verweist über seinen Namen auf seinen Bereich: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Grid platziert sie automatisch.

Die mittlere Zeile verwendet 1fr, das die gesamte verbleibende Viewport-Höhe nach dem Header und Footer mit fester Höhe ausfüllt. Dadurch erstrecken sich Sidebars und Hauptinhalt immer über die gesamte Viewport-Höhe – explizite Höhenberechnungen sind nicht erforderlich.

Definieren Sie auf mobilen Geräten mit einer Media Query grid-template-areas als einspaltigen Stapel neu: Header, Sidebar, main, aside, footer werden vertikal angeordnet. Die DOM-Reihenfolge bleibt erhalten; nur das visuelle Grid-Template ändert sich. Grid-Bereiche machen die responsive Umstrukturierung übersichtlich.

Entfernen Sie auf Tablets die rechte aside und erweitern Sie main: Definieren Sie "header header" "sidebar main" "footer footer" mit grid-template-columns: 240px 1fr neu. Setzen Sie aside { display: none } oder verschieben Sie aside in der Bereichsdefinition unter main.

Fügen Sie einen Abstand zwischen den Grid-Tracks hinzu: gap: var(--spacing-4). Wenden Sie Padding innerhalb jedes Bereichs statt am Grid-Container an, damit die Abstände konsistent bleiben. Header und Footer erhalten üblicherweise eigenes horizontales Padding, das an die Ausrichtung der maximalen Breite des Grids angepasst ist.

Der Hauptinhaltsbereich kann selbst ein Grid sein – ein zweispaltiger Artikel mit Sidebar innerhalb des main-Bereichs. Verschachtelte Grids erzeugen ein Inhaltslayout innerhalb des Seitenlayouts, ohne komplexe Klassenhierarchien oder tief verschachtelte Positionierung.

Der Header wird sticky: header { position: sticky; top: 0; z-index: 10; }. In einem Grid-Layout funktioniert die Sticky-Positionierung eines Grid-Kindelements wie erwartet – der Header bleibt haften, während main, sidebar und aside darunter scrollen.

Beide Sidebars können sticky sein: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Sie bleiben sichtbar, während der Hauptinhalt scrollt – so entsteht ein Layout mit drei Panels, in dem nur der mittlere Bereich scrollt.

Verwenden Sie Grid für zweidimensionale Seitenlayouts wie das Holy-Grail-Layout – Grid ist besonders geeignet, um Elemente gleichzeitig in benannten Zeilen und Spalten zu platzieren. Verwenden Sie Flexbox für eindimensionale Komponentenlayouts (Navigationselemente in einer Zeile, Karteninhalt in einer Spalte) innerhalb der Grid-Bereiche.

Warum ist grid-template-areas besonders nützlich für responsive Holy-Grail-Layouts?

CSS Grid macht das historisch schwierige Holy-Grail-Layout trivial: grid-template-areas benennt Bereiche, 1fr in der mittleren Zeile füllt die Viewport-Höhe aus, und Media Queries definieren die Bereichszuordnung für das responsive Einklappen neu. Sticky Header und Sidebars lassen sich ohne zusätzliche Komplexität ergänzen.