CSS Grid ist die mächtigste Methode, um Webseiten in einem zweidimensionalen System aus Zeilen und Spalten anzuordnen. Nach Jahren des Kampfes mit float, Tabellen und fragilen negativen Abständen machte es Grid endlich möglich, vertikale und horizontale Platzierung gleichzeitig zu steuern, indem man ein paar Zeilen auf einen Container schreibt. In diesem Leitfaden gehen wir Schritt für Schritt vor, von den Grundkonzepten bis zum Aufbau eines echten Seitengerüsts.
Worin unterscheidet sich Grid von Flexbox?
Beide sind moderne Layout-Werkzeuge, doch sie wurden für unterschiedliche Aufgaben entworfen. Flexbox ist eindimensional: Es richtet Elemente entlang einer einzigen Zeile oder Spalte aus. CSS Grid ist zweidimensional: Es definiert Zeilen und Spalten gemeinsam, sodass du ein Element auf beiden Achsen genau in die gewünschte Zelle setzen kannst.
- Flexbox: einachsige Abläufe wie eine Navigationsleiste, eine Button-Gruppe oder der Inhalt innerhalb einer Karte.
- Grid: echte tabellenartige Strukturen wie ein Seitengerüst, eine Galerie, ein Dashboard oder ein Kartenraster.
In der Praxis verwendet man sie zusammen: Grid für das äußere Gerüst, Flexbox innerhalb der Karten.
Dein erstes Grid: Zeilen- und Spaltenvorlagen
Wenn du einem Element display: grid gibst, wird es zu einem Grid-Container und seine direkten Kinder werden zu Grid-Elementen. Spalten definierst du mit grid-template-columns und Zeilen mit grid-template-rows:
.galerie {
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 16px;
}Dieser Code erzeugt drei feste Spalten mit 16px Abstand dazwischen. Feste Pixelwerte sind jedoch nicht flexibel. Hier kommt meine liebste Grid-Einheit ins Spiel: fr (die Fraktionseinheit). fr teilt den verfügbaren Platz in Verhältnisse auf:
.galerie {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}Jetzt teilen sich die drei Spalten die verfügbare Breite gleichmäßig. Hättest du 2fr 1fr 1fr geschrieben, wäre die erste Spalte doppelt so breit wie die anderen.
repeat(), minmax() und echte Flexibilität
Statt denselben Wert immer wieder zu schreiben, nutze die Funktion repeat(). minmax() gibt einer Spalte eine untere und eine obere Grenze. Kombiniert man beide, erhält man ein responsives Raster:
.karten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}Diese eine Zeile ist bemerkenswert mächtig. Mit auto-fit berechnet der Browser, wie viele Spalten auf den Bildschirm passen, während jede mindestens 220px breit bleibt, und verteilt dann dank 1fr den restlichen Platz gleichmäßig. Das Ergebnis: ein Kartenraster, das auf einem breiten Bildschirm vier Spalten zeigt, auf einem Tablet zwei und auf einem Smartphone eine, ohne eine einzige Media Query.
Der Unterschied zwischen auto-fit und auto-fill ist subtil: auto-fit klappt leere Tracks zusammen und streckt die vorhandenen Elemente, während auto-fill die unsichtbaren leeren Spalten beibehält. Für die meisten Kartenlayouts wirkt auto-fit natürlicher.
Ein Seitengerüst mit benannten Bereichen
Die am besten lesbare Funktion von Grid ist grid-template-areas. Du beschreibst das Layout fast wie eine ASCII-Zeichnung:
.seite {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"seitenleiste kopf"
"seitenleiste inhalt"
"seitenleiste fuss";
min-height: 100vh;
gap: 16px;
}
.seite header { grid-area: kopf; }
.seite aside { grid-area: seitenleiste; }
.seite main { grid-area: inhalt; }
.seite footer { grid-area: fuss; }Das ergibt ein klassisches Anwendungslayout: eine Seitenleiste mit fester Breite links sowie Kopf, Inhalt und Fußzeile gestapelt rechts. Um auf dem Smartphone auf eine einzige Spalte umzuschalten, musst du nur die Vorlage neu definieren:
@media (max-width: 760px) {
.seite {
grid-template-columns: 1fr;
grid-template-areas:
"kopf"
"inhalt"
"fuss"
"seitenleiste";
}
}Ohne das HTML anzufassen haben wir die Seitenleiste nach ganz unten verschoben, nur durch Ändern der Vorlage. Genau diese Wartungsfreundlichkeit lässt Grid glänzen.
Elemente über Liniennummern platzieren
Die Grid-Linien sind ab 1 nummeriert. Mit grid-column und grid-row legst du fest, wie viele Spalten oder Zeilen ein Element überspannt:
.hervorgehoben {
grid-column: 1 / 3; /* von Linie 1 bis Linie 3: überspannt zwei Spalten */
grid-row: 1 / 2;
}Das Schlüsselwort span ist lesbarer: grid-column: span 2; sagt einem Element, von seiner Position aus zwei Spalten zu überspannen. Zum Ausrichten von Zellen nutzt du justify-items (horizontal) und align-items (vertikal); um ein einzelnes Element gesondert auszurichten, gibt es justify-self und align-self.
Häufige Fehler
- Grid für alles verwenden: ein einzeiliges Menü bleibt mit Flexbox einfacher.
- Feste Höhen setzen: belasse Zeilen auf
autound lass sie mit dem Inhalt wachsen. - margin statt
gapverwenden: diegap-Eigenschaft von Grid verwaltet Abstände konsistent, ohne über die Ränder zu laufen. - auto-fit / auto-fill verwechseln: siehst du unerwartete leere Spalten, hast du wahrscheinlich die falsche gewählt.
Häufige Fragen
Welche Browser unterstützen CSS Grid?
Alle modernen Browser (Chrome, Firefox, Safari, Edge) unterstützen CSS Grid seit Jahren vollständig. Abgesehen vom veralteten Internet Explorer gibt es praktisch keine Kompatibilitätssorgen mehr, sodass du es bei heutigen Projekten bedenkenlos in Produktion einsetzen kannst.
Soll ich Grid oder Flexbox verwenden?
Ordnest du Inhalte auf zwei Achsen an (Zeilen und Spalten), greif zu Grid; reihst du etwas auf einer einzigen Achse auf, nimm Flexbox. In den meisten realen Projekten verschachteln sie sich: Grid für das äußere Gerüst, Flexbox für die Ausrichtung innerhalb von Komponenten.
Ist die fr-Einheit besser als Prozentwerte?
Meist ja. fr verteilt den restlichen Platz und berücksichtigt dabei automatisch die gap-Abstände, während du bei Prozentwerten die Abstände selbst abziehen musst. Damit ist fr die sicherere und sauberere Wahl für Verhältnisse innerhalb eines Grids.
Brauchst du eine schnelle, responsive, Grid-basierte Oberfläche für dein Projekt? Ich baue saubere, wartbare Layouts mit modernem CSS. Nimm Kontakt auf, um deine Idee zu besprechen.