Türchen 7 – Grid Basics

CSS Grid ist einer der größten Fortschritte in der Geschichte des Web-Layouts. Während Flexbox Probleme entlang einer einzigen Achse löst, denkt Grid von Anfang an zweidimensional. Genau das macht es zur idealen Lösung für komplexere Layouts, die früher nur mit Hacks, Floats oder JavaScript erreichbar waren.

Als Grid vollständig von allen modernen Browsern unterstützt wurde, hat das meine Arbeitsweise als Frontend Engineer dauerhaft verändert. Layouts wurden klarer, logischer und deutlich wartbarer. Dieses Türchen legt das Fundament, bevor wir in den nächsten Schritten tiefer in Grid-Features wie minmax, auto-fit, auto-fill oder subgrid einsteigen.

Denken in Spalten und Reihen: Tracks

Grid basiert auf sogenannten Tracks. Diese Tracks sind die fundamentalen Bausteine eines jeden Grid-Layouts und gliedern sich in zwei Kategorien: Spalten (columns) und Reihen (rows). Spalten verlaufen vertikal von oben nach unten und definieren die Breite der Inhalte. Reihen verlaufen horizontal von links nach rechts und definieren die Höhe. Diese zweidimensionale Denkweise unterscheidet Grid grundlegend von Flexbox, das immer nur entlang einer Achse arbeitet.

Ein einfaches Beispiel verdeutlicht das Konzept:

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

Was entsteht mit dieser simplen Definition? Links erscheint eine fixe Sidebar mit exakt 200 Pixeln Breite. In der Mitte erstreckt sich ein flexibler Hauptbereich, der den gesamten verfügbaren Raum einnimmt. Rechts befindet sich ein weiterer fixer Bereich, ebenfalls 200 Pixel breit.

Das ist der Kern von Grid. Man definiert die Struktur vorweg und das Layout ergibt sich automatisch daraus. Es gibt keine manuellen Berechnungen, keine komplizierten Wrapper-Elemente und keine verschachtelten Container, die nur existieren, um ein Layout zu ermöglichen. Grid trennt Struktur und Inhalt konsequent voneinander.

Units, die man kennen muss

px – fixe Werte

Pixelwerte sind die einfachste Form der Größenangabe in Grid. Sie sind nicht flexibel, aber absolut zuverlässig und vorhersehbar. Wenn eine Spalte exakt 250 Pixel breit sein soll, dann bleibt sie das und das unabhängig vom Viewport oder anderen Faktoren. Das macht sie ideal für Sidebars, Header-Elemente oder UI-Komponenten mit fester Breite.

fr – die flexible Einheit

Die fr-Einheit ist das Herzstück von Grid und eine der größten Innovationen des gesamten Spezifikation. fr steht für „fraction” (Bruchteil) und beschreibt einen proportionalen Anteil am verfügbaren Platz. Im Gegensatz zu Prozentangaben berücksichtigt fr automatisch bereits vergebene fixe Größen und Gaps.

grid-template-columns: 1fr 2fr;

In diesem Beispiel wird der verfügbare Raum in drei Teile aufgeteilt. Der linke Bereich erhält einen Teil (1fr), der rechte zwei Teile (2fr). Das Ergebnis: Der rechte Bereich ist exakt doppelt so breit wie der linke und das unabhängig davon, wie breit der Container insgesamt ist. Diese Art der Proportionalität ist mit Flexbox deutlich aufwendiger zu erreichen und mit Prozenten nahezu unmöglich, sobald fixe Größen im Spiel sind.

auto – Inhalt bestimmt die Größe

Die auto-Größe ist besonders intelligent. Sie passt sich exakt an den Inhalt an. Das ist extrem hilfreich, wenn man Buttons nebeneinander platziert, die nur so breit sein sollen wie ihr Text. Oder wenn eine Sidebar genau die Breite ihres Inhalts haben soll, aber keinen Pixel mehr. Anders als bei min-content oder max-content verhält sich auto dabei flexibel und kann wachsen, wenn mehr Platz vorhanden ist.

Prozentwerte

Prozentwerte funktionieren in Grid genauso wie in anderen Layout-Kontexten. Sie sind nach wie vor nützlich, aber in modernen Grid-Layouts werden sie häufig durch die fr-Einheit ersetzt, weil diese eleganter mit Gaps und fixen Größen umgeht. Prozente haben jedoch ihre Berechtigung, wenn man explizit auf die Container-Breite referenzieren möchte, unabhängig von anderen Grid-Tracks.

Auto-Placement – der Browser füllt die Lücken

Eines der kraftvollsten Features von Grid ist die Fähigkeit, Elemente automatisch zu platzieren. Grid platziert Elemente standardmäßig Zeile für Zeile, von links nach rechts, ähnlich wie Text in einem Dokument fließt. Dieses Verhalten nennt sich Auto-Placement und funktioniert vollkommen intuitiv.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

HTML:

<div class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>

Layout:

A B C
D E _

Das Verhalten ist intuitiv und erfordert keine zusätzliche Konfiguration. Der Browser ordnet die Elemente automatisch an, erstellt bei Bedarf neue Reihen und verwaltet die gesamte Platzierung.

Doch Grid erlaubt es auch, einzelne Items gezielt zu platzieren, ohne das automatische Placement der anderen Elemente zu stören:

.item-c {
  grid-column: 1 / 3;
}

Mit dieser Anweisung spannt das Element C nun zwei Spalten. Es beginnt bei Grid-Linie 1 und endet bei Grid-Linie 3, wodurch es die ersten beiden Spalten einnimmt. Das Bemerkenswerte ist, dass der Rest der Elemente sich automatisch um dieses größere Element herum anordnet. Es gibt keine komplexen Berechnungen, keine Wrapper-Divs und keine manuellen Anpassungen. Grid verwaltet die Platzierung intelligent im Hintergrund.

Praxisbeispiel: Das klassische Drei-Spalten-Layout

Viele Projekte benötigen ein klassisches Drei-Spalten-Layout. Eine linke Sidebar für Navigation, der Hauptinhalt in der Mitte und eine rechte Sidebar für zusätzliche Informationen oder Widgets. In der Ära vor Grid war dieses Layout eine Herausforderung. Mit Flexbox ist es zwar möglich, aber mühsam umzusetzen. Besonders wenn die Spalten unterschiedliche Höhen haben oder wenn das Layout auf verschiedenen Bildschirmgrößen funktionieren soll.

Mit Grid reduziert sich das gesamte Problem auf wenige Zeilen:

.layout {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 2rem;
}

Das war’s. Die beiden Sidebars erhalten eine feste Breite von jeweils 250 Pixeln, der Hauptinhalt nimmt den gesamten verfügbaren Platz ein. Der gap sorgt für gleichmäßige Abstände zwischen den Spalten. Keine Hacks, keine prozentualen Berechnungen unter Berücksichtigung von Margins, keine Höhenprobleme durch unterschiedlich lange Inhalte. Grid behandelt alle drei Spalten als gleichwertige Tracks eines einheitlichen Layouts.

Responsive ohne Media Queries? Mit Grid kein Problem.

Ein häufiges Pattern in der Web-Entwicklung ist ein Grid mit drei Karten nebeneinander. Der folgende Code definiert genau das:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Auf Desktop-Bildschirmen funktioniert das perfekt. Doch auf kleinen Screens sollen die Karten typischerweise 100% Breite einnehmen und untereinander gestapelt werden. Die klassische Lösung wäre eine Media Query:

@media screen and (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Das funktioniert, ist aber eine explizite Breakpoint-Definition. Mit Grid-Features wie auto-fit und minmax, die wir in Türchen 8 im Detail behandeln werden, geht es oft komplett ohne Media Queries. Das Grid passt sich dann vollautomatisch an die verfügbare Breite an und umbricht, wenn der Platz nicht mehr ausreicht. Doch dazu kommen wir erst morgen.

Row- und Column-Gaps

Früher musste man Abstände zwischen Grid-Items über Margins „faken”, ein umständlicher und fehleranfälliger Prozess. Man musste negative Margins am Container setzen oder komplexe :last-child-Selektoren verwenden, um zu verhindern, dass am Rand ungewollte Abstände entstehen. Grid löst dieses Problem mit einer eingebauten Lösung:

.grid {
  gap: 1rem;
}

Die gap-Eigenschaft definiert den Abstand zwischen den Grid-Tracks und das sowohl zwischen Spalten als auch zwischen Reihen. Diese Abstände werden nur zwischen den Items eingefügt, nie am äußeren Rand des Containers. Das Ergebnis ist sauber, vorhersehbar und funktioniert zuverlässig.

Wenn man unterschiedliche Abstände für Spalten und Reihen benötigt, kann man die Werte auch separat definieren:

column-gap: 2rem;
row-gap: 1rem;

Damit entstehen klare, saubere Abstände und das ganz ohne Selektor-Salat oder Margin-Hacks. Der Code bleibt wartbar und die visuelle Struktur ist direkt aus dem CSS ersichtlich.

Grid Areas – Layouts sprechen lassen

Ein besonders elegantes Pattern in Grid sind die sogenannten Grid Areas. Sie machen Layouts nicht nur funktional, sondern auch extrem lesbar. Mit Grid Areas definiert man das Layout visuell im CSS in einer Form, die fast schon wie ein ASCII-Art-Diagramm aussieht:

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
}

Diese Definition beschreibt ein Layout mit drei Zeilen. Die erste Zeile enthält nur den Header, der beide Spalten überspannt. Die zweite Zeile teilt sich in Sidebar und Content-Bereich. Die dritte Zeile wird komplett vom Footer eingenommen. Die Struktur ist auf den ersten Blick ersichtlich und das selbst für Team-Mitglieder, die den Code zum ersten Mal sehen.

Die einzelnen Elemente werden dann ihren jeweiligen Areas zugewiesen:

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Das HTML bleibt dabei komplett frei von jeglicher Layoutlogik:

<div class="grid">
  <header class="header"></header>
  <aside class="sidebar"></aside>
  <main class="content"></main>
  <footer class="footer"></footer>
</div>

Die Reihenfolge der Elemente im HTML ist völlig unabhängig von ihrer visuellen Position im Grid. Man könnte die Sidebar im HTML nach dem Content platzieren, und sie würde trotzdem links erscheinen. Das eröffnet völlig neue Möglichkeiten für responsive Layouts und für die Trennung von semantischer Struktur und visueller Darstellung.

Dieses Pattern ist besonders gut geeignet für Dashboards, Admin-Interfaces, Marketing-Pages und komplexe Landingpages. Überall dort, wo Layouts komplex sind und sich die visuelle Struktur zwischen verschiedenen Bildschirmgrößen grundlegend ändert, spielen Grid Areas ihre Stärken aus.

Ein mögliches Szenario: Formulare und mehrere Spalten

Formulare mit mehreren Spalten sind in vielen Projekten ein Pain-Point. Man möchte verwandte Felder nebeneinander platzieren, um Platz zu sparen und die Übersichtlichkeit zu erhöhen. Gleichzeitig sollen manche Felder wie etwa Textareas für längere Eingaben oder wichtige Felder wie E-Mail-Adressen die volle Breite einnehmen.

Mit Grid ist dieses Szenario erstaunlich einfach umzusetzen:

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

Dieser Code definiert ein zweispaltiges Formular mit gleichmäßigen Abständen zwischen den Feldern. Jedes Formularfeld wird automatisch in die nächste verfügbare Zelle platziert. Für Felder, die über beide Spalten gehen sollen, fügt man eine einzige Zeile CSS hinzu:

.full {
  grid-column: 1 / -1; /* von der ersten bis zur letzten Grid-Linie */
}

Diese Notation 1 / -1 bedeutet: Beginne bei Grid-Linie 1 (ganz links) und ende bei Grid-Linie -1 (ganz rechts). Der negative Index -1 ist ein praktisches Feature, das immer die letzte Linie referenziert und das unabhängig davon, wie viele Spalten das Grid hat. Man könnte das Grid später auf drei Spalten erweitern, und die .full-Klasse würde weiterhin funktionieren, ohne angepasst werden zu müssen.

Ein Eingabefeld mit der Klasse .full spannt nun beide Spalten – sauber, ohne Tricks und vollkommen wartbar.

Grid löst Probleme, die Flexbox nicht lösen kann

Es gibt Layout-Szenarien, in denen Flexbox an seine Grenzen stößt. Ein klassisches Beispiel: Karten sollen in mehreren Spalten nebeneinander angeordnet werden und dabei mit festen oder vorhersehbaren Höhen funktionieren.

Mit Flexbox entstehen dabei typische Probleme. Karten in einer Reihe können zwar auf die gleiche Höhe gebracht werden, aber mehrere Reihen bleiben unabhängig voneinander. Das führt zu unschönem Wrapping-Verhalten, bei dem Karten unterschiedlicher Reihen nicht mehr vertikal ausgerichtet sind. Abstände zwischen den Reihen sind nur mit Margins umsetzbar, die dann am Rand manuell kompensiert werden müssen.

Grid löst all diese Probleme mit einer simplen Definition:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Die Höhen der Karten sind unabhängig und stabil. Jede Karte nimmt genau eine Grid-Zelle ein, und die Spaltenbreiten bleiben über alle Reihen hinweg konsistent. Abstände sind durch gap sauber definiert und funktionieren zuverlässig. Die Struktur bleibt klar und wartbar und das selbst wenn sich die Anzahl der Karten oder ihre Inhalte ändern.

Der fundamentale Unterschied wird oft so beschrieben: Flexbox arbeitet „von innen nach außen” (content-based: Die Größe der Items basiert auf ihrem Inhalt und beeinflusst das Layout). Grid arbeitet „von außen nach innen” (layout-based: Die Struktur wird vorher definiert, und die Items passen sich dieser Struktur an). Das ist der eigentliche Paradigmenwechsel, der Grid zu einem unverzichtbaren Werkzeug für zweidimensionale Layouts macht.

Fazit

CSS Grid ist die zweidimensionale Lösung für Layouts im Web. Wer die Grundlagen wie z.B. Tracks, fr-Units, Auto-Placement und Grid Areas sicher beherrscht, kann Layouts klarer, schneller und robuster umsetzen als mit jedem anderen Werkzeug.

In Türchen 8 geht es weiter mit den Grid-Features, die Grid zum echten Problemlöser machen: minmax, auto-fit, auto-fill und fortgeschrittenes Auto-Placement.