CSS Grid Layout: Visueller Leitfaden fuer Entwickler

Was ist CSS Grid?

CSS Grid ist ein zweidimensionales Layout-System, das Zeilen und Spalten gleichzeitig kontrolliert. Anders als Flexbox, das primaer eindimensional arbeitet (Zeile oder Spalte), ermoeglicht Grid die praezise Platzierung von Elementen in einem zweidimensionalen Raster.

Grid wurde 2017 in allen grossen Browsern implementiert und hat die Art, wie Webentwickler Layouts erstellen, grundlegend veraendert. Komplexe Layouts, die frueher Floats, Tabellen oder verschachtelte Flexbox-Container erforderten, lassen sich mit Grid in wenigen Zeilen CSS umsetzen.

Grid-Grundlagen: Container und Items

Ein Grid besteht aus einem Container (display: grid) und seinen direkten Kind-Elementen (Grid Items). Der Container definiert das Raster mit grid-template-columns und grid-template-rows. Die Items werden automatisch oder manuell in die Rasterzellen platziert.

Die Einheit fr (fraction) verteilt verfuegbaren Platz anteilig. grid-template-columns: 1fr 2fr erzeugt zwei Spalten, wobei die zweite doppelt so breit ist wie die erste. Die repeat()-Funktion spart Tipparbeit: repeat(3, 1fr) erzeugt drei gleichbreite Spalten.

• gap: Definiert den Abstand zwischen Zeilen und Spalten. Ersetzt den frueheren grid-gap.
• grid-template-areas: Benennt Bereiche im Raster fuer semantisches Layout. Ideal fuer Seitenlayouts mit Header, Sidebar und Content.
• auto-fit / auto-fill: Erstellt responsive Raster ohne Media Queries. Die Spaltenanzahl passt sich automatisch an die verfuegbare Breite an.

Responsive Grid-Muster

Das maechtigste responsive Muster mit Grid ist: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Diese einzige Zeile erzeugt ein Raster, das automatisch so viele Spalten wie moeglich platziert, wobei jede mindestens 250px breit ist. Auf grossen Bildschirmen sehen Sie vier Spalten, auf Tablets zwei und auf Smartphones eine.

Fuer asymmetrische Layouts kombinieren Sie feste und flexible Spalten: grid-template-columns: 250px 1fr erzeugt eine fixe Sidebar und einen flexiblen Inhaltsbereich. Auf kleinen Bildschirmen stacken Sie die Elemente mit einer Media Query.

Grid vs. Flexbox: Wann was verwenden

Grid und Flexbox ergaenzen sich, sie konkurrieren nicht. Verwenden Sie Grid fuer zweidimensionale Layouts (Seitenlayouts, Bildergalerien, Dashboards) und Flexbox fuer eindimensionale Anordnungen (Navigationsleisten, Kartenlayouts, zentrierte Inhalte).

In der Praxis verschachteln Sie oft beide: Ein Grid-Layout fuer die Gesamtseite mit Flexbox innerhalb einzelner Komponenten. Diese Kombination deckt praktisch jeden Layout-Bedarf ab.

Grid visuell generieren

Unser CSS Grid Generator laesst Sie ein Grid visuell konfigurieren: Spalten, Zeilen, Gaps und Bereiche per Drag-and-Drop definieren. Der fertige CSS-Code wird in Echtzeit angezeigt und kann direkt kopiert werden. Perfekt fuer Entwickler, die mit Grid experimentieren oder schnell ein Layout-Geruest erstellen moechten.