CSS-Layout-Generator
Seitenlayouts mit CSS Grid: Holy Grail, Sidebar, Sticky Footer, Dashboard oder Kartenraster – responsiv, mit HTML und CSS.
Der CSS-Layout-Generator erzeugt Seitengerüste mit CSS Grid und grid-template-areas: Holy Grail, Sidebar links oder rechts, Sticky Footer, Dashboard und ein automatisches Kartenraster. Breiten, Abstand, maximale Breite und Umbruchpunkt sind einstellbar. Das Layout ist mobil zuerst gebaut und wechselt ab dem Umbruchpunkt in die Desktop-Ansicht.
<div class="layout">
<header>Kopfbereich</header>
<nav>Navigation</nav>
<main>Hauptinhalt</main>
<aside>Seitenleiste</aside>
<footer>Fußbereich</footer>
</div>Seitenlayouts mit CSS Grid
CSS Grid ist das Werkzeug für das Grundgerüst einer Seite. Mit grid-template-areas beschreibst du die Anordnung als lesbare Zeichnung. Der Generator
baut mobil zuerst: Ohne Media Query stehen alle Bereiche untereinander, ab dem Umbruchpunkt greift
die Desktop-Anordnung.
| Layout | Typischer Einsatz |
|---|---|
| Holy Grail | Portale, Dokumentationen |
| Sidebar links/rechts | Blogs, Shops mit Filter |
| Sticky Footer | Landingpages, einfache Seiten |
| Dashboard | Web-Apps, Admin-Oberflächen |
| Kartenraster | Produktlisten, Teaser |
Raster mit beliebigen Spalten und Zeilen erstellst du im CSS-Grid-Generator, die Ausrichtung innerhalb der Bereiche im Flexbox-Playground. Wie das Layout auf echten Geräten wirkt, zeigt der Breakpoint-Tester.
Häufige Fragen
Was sind grid-template-areas?
Mit grid-template-areas benennst du Bereiche wie header, nav oder main und zeichnest das Layout als Text. Jedes Kindelement bekommt per grid-area seinen Bereich. Für eine andere Anordnung, etwa auf dem Handy, änderst du nur die Textzeichnung in einer Media Query.
Was ist ein Holy-Grail-Layout?
Ein klassisches Webseiten-Layout mit Kopfbereich, drei Spalten (Navigation, Inhalt, Seitenleiste) und Fußbereich, bei dem der Fuß auch bei wenig Inhalt unten bleibt. Mit CSS Grid sind das nur wenige Zeilen.
Warum min-height: 100dvh?
dvh steht für die dynamische Viewport-Höhe. Anders als vh berücksichtigt sie ein- und ausfahrende Browserleisten auf Mobilgeräten. So füllt das Layout den Bildschirm und der Fußbereich sitzt unten, ohne dass Inhalt verdeckt wird.
Wie funktioniert das Kartenraster ohne Media Query?
repeat(auto-fit, minmax(200px, 1fr)) legt so viele Spalten an, wie mit mindestens 200 px Breite hineinpassen, und verteilt den Rest gleichmäßig. min(200px, 100%) verhindert, dass Karten auf sehr schmalen Bildschirmen überlaufen.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.