CSS Grid Layout

CSS Grid ist ein zweidimensionales Layout-System in CSS, das Elemente gleichzeitig in Zeilen (Rows) und Spalten (Columns) anordnet und komplexe Seitenstrukturen ohne verschachtelte HTML-Elemente ermöglicht.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: CSS Grid Layout, Grid-System, CSS Layout Grid

Was ist CSS Grid?

CSS Grid ist ein natives Browser-Layout-System, das 2017 von allen großen Browsern eingeführt wurde und seither den Goldstandard für komplexe Seitenlayouts darstellt. Im Unterschied zu älteren Methoden wie Float-Layouts oder Tabellen wurde CSS Grid von Grund auf für zweidimensionale Layouts entwickelt: Designer können gleichzeitig Zeilen und Spalten definieren und Elemente präzise in diesem Raster positionieren.

Erklärung

Grundprinzip: Container und Items

CSS Grid funktioniert über zwei Ebenen:

• Grid Container: Das Elternelement, auf das display: grid angewendet wird. Hier werden Rasterstruktur und -abstände definiert.
• Grid Items: Alle direkten Kindelemente des Containers werden automatisch zu Grid-Elementen.

``css .container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 300px auto; gap: 20px; } ``

Columns und Rows definieren

Die Haupteigenschaften zur Rasterdefiniton sind grid-template-columns und grid-template-rows. Die fr-Einheit (fraction) ist dabei besonders mächtig: Sie verteilt den verfügbaren Platz proportional.

• 1fr 1fr 1fr → drei gleich breite Spalten
• 200px 1fr → eine feste Spalte + eine flexible
• repeat(4, 1fr) → vier gleiche Spalten als Kurzform
• minmax(200px, 1fr) → mindestens 200 px, maximal beliebig breit

Grid Areas

Grid Template Areas ermöglichen eine visuell verständliche Layoutdefinition:

```css .container { display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; }

header { grid-area: header; } .sidebar { grid-area: sidebar; } main { grid-area: main; } footer { grid-area: footer; } ```

Diese Methode ist besonders Designer-freundlich, da das CSS-Bild direkt dem visuellen Layout entspricht.

Auto-Placement

Ohne explizite Positionierung verteilt CSS Grid Elemente automatisch von links nach rechts, zeilenweise. Das Verhalten lässt sich mit grid-auto-flow steuern:

• row (Standard): Elemente füllen Zeilen auf
• column: Elemente füllen Spalten auf
• dense: Lücken werden mit nachfolgenden Elementen gefüllt

Für responsive Galerien ohne Media Queries ist folgendes Muster ideal:

``css .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } ``

Implizite vs. explizite Tracks

Explizite Tracks werden mit grid-template-* definiert. Wenn mehr Elemente vorhanden sind als Tracks definiert wurden, erstellt der Browser implizite Tracks. Deren Größe wird mit grid-auto-rows und grid-auto-columns gesteuert.

Ausrichtung mit Grid

CSS Grid bietet präzise Ausrichtungsoptionen:

• justify-items / justify-self: Horizontale Ausrichtung von Items innerhalb ihrer Zelle
• align-items / align-self: Vertikale Ausrichtung von Items
• justify-content / align-content: Ausrichtung des gesamten Grids im Container

Beispiele

Klassisches Blog-Layout: ``css .layout { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr auto; gap: 2rem; min-height: 100vh; } ``

Responsive Kacheln ohne Media Query: ``css .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } ``

In der Praxis

CSS Grid wird heute für nahezu alle Seitenlayouts eingesetzt, von einfachen Zwei-Spalten-Layouts bis hin zu komplexen Dashboard-Oberflächen. Frameworks wie Bootstrap 5 und Tailwind CSS bieten Grid-Utility-Klassen, die intern CSS Grid nutzen.

Besonders im deutschen Web-Agentur-Umfeld hat sich CSS Grid als Standard durchgesetzt: Laut State of CSS Survey 2023 verwenden über 94 % der befragten Entwicklerinnen und Entwickler CSS Grid regelmäßig.

Wann Grid bevorzugen?

• Zweidimensionale Layouts (Zeilen UND Spalten gleichzeitig)
• Komplexe Seitenstrukturen (Header, Sidebar, Main, Footer)
• Magazine- und Dashboard-Layouts
• Bildergalerien und Kachelsysteme

Vergleich & Abgrenzung

Grid und Flexbox schließen sich nicht aus — sie ergänzen sich. Typisch: Grid für das Seiten-Makrolayout, Flexbox für Mikrolayouts innerhalb einzelner Komponenten.

Häufige Fragen (FAQ)

Muss ich Flexbox lernen, wenn ich CSS Grid nutze? Ja. Beide Systeme haben unterschiedliche Stärken und ergänzen sich im Alltag. Grid für Layouts, Flexbox für Navigation und Komponentenausrichtung.

Unterstützen alle Browser CSS Grid? Ja. Laut caniuse.com (Stand 2024) unterstützen über 97 % aller Browser CSS Grid. Internet Explorer 11 hatte eine ältere, inkomplette Implementierung — dieser Browser ist jedoch seit 2022 offiziell eingestellt.

Kann ich Grid für E-Mails verwenden? Nein. E-Mail-Clients wie Outlook unterstützen CSS Grid nicht. Für E-Mail-Layouts werden weiterhin Tabellen-basierte Layouts empfohlen.

Verwandte Einträge

• CSS Flexbox — Das ergänzende eindimensionale Layout-System
• Responsive Design – flexible Layouts für alle Bildschirmgrößen — Grid in Kombination mit Breakpoints
• Web Design Grundlagen — Einführung in Layouts und Struktur
• Design System für Web — Grid als Grundlage für Komponenten-Layouts

Weiterführend

• Wathan, Adam / Schoger, Steve: Refactoring UI, Selbstverlag, 2018
• Verou, Lea: CSS Secrets, O'Reilly Media, 2015
• Weyl, Estelle: Grid Layout in CSS, O'Reilly Media, 2016
• MDN Web Docs: CSS Grid Layout — developer.mozilla.org (laufend aktualisiert)
• Jenkov, Jakob: CSS Grid Tutorial, jenkov.com, 2023