Wir bemerken selten Element für Element, warum ein Design "ordentlich" wirkt; dahinter steckt ein unsichtbares Skelett, und was wir Grid-System im Design nennen, ist genau dieses Skelett. Ein Grid teilt die Seite in gleichmäßig verteilte Spalten und Zeilen, damit wir Text, Bilder und Buttons ausrichten können. Ein gut aufgebautes Grid nimmt die Last, jedes Mal aufs Neue zu entscheiden, wo ein Element sitzen soll; es schafft einen Rhythmus und eine Logik, der das Auge folgen kann. In diesem Artikel gehe ich die Bausteine des Grids, die Spalten- und Baseline-Logik, eine echte CSS-Umsetzung und die häufigen Fehler durch.
Warum Grids funktionieren
Der eigentliche Beitrag des Grids ist nicht Ästhetik, sondern Konsistenz. Überschriften, Absätze und Bilder, die an denselben unsichtbaren Linien einrasten, erzeugen eine Ausrichtung, die das Auge wahrnimmt, und diese Ausrichtung lässt Inhalte auf unbewusster Ebene "professionell" und "vertrauenswürdig" wirken. In der Praxis löst ein Grid drei Probleme zugleich:
- Es senkt die Entscheidungslast: Breite und Position jedes Elements werden relativ zu den Spalten festgelegt, du fragst nicht ständig "wie viele Pixel?"
- Es liefert Konsistenz: Dutzende Screens im selben Projekt ruhen auf demselben System, was ein stimmiges Gesamtbild ergibt.
- Es erleichtert die Teamarbeit: Sprechen Designer und Entwickler dieselbe Spaltensprache, überträgt sich das Figma-Layout fast eins zu eins in Code.
Die Bausteine eines Grids
Beim Sprechen über ein Spalten-Grid tauchen ein paar Begriffe ständig auf. Sie zu klären macht die nächsten Schritte deutlich leichter:
- Spalte: der vertikale Bereich, in dem der Inhalt sitzt. Im Web ist 12 Spalten eine gängige Wahl; 12 teilt sich sauber durch 2, 3, 4 und 6, was flexible Layouts ermöglicht.
- Steg (Gutter): der Abstand zwischen zwei Spalten. Er verhindert, dass Elemente aneinanderkleben, und schafft Atemraum.
- Rand (Margin): der Abstand des Grids zum Bildschirmrand. Auf Mobilgeräten klein, auf breiten Bildschirmen größer.
- Modul und Zeile: die Zellen, die entstehen, wo Spalten horizontale Linien kreuzen; Karten und Bildblöcke sitzen auf diesen Modulen.
Wenn diese vier Begriffe zusammenkommen, lassen sich die Fragen "wie breit, wo beginnt es, wie viele Spalten" alle mit Zahlen beantworten.
Das Baseline-Grid: vertikaler Rhythmus
Das Spalten-Grid löst die horizontale Ausrichtung; das Baseline-Grid löst die vertikale. Ein Baseline-Grid teilt die Seite in horizontale Linien gleicher Höhe und strebt an, dass jede Textzeile auf diesen Linien sitzt. Die Logik lautet: Du wählst eine Basiseinheit (zum Beispiel 8px) und drückst jedes vertikale Maß — line-height, Überschriftenabstände, Absatzabstände — als Vielfaches dieser Einheit aus. Das Ergebnis: Textzeilen in zwei getrennten Spalten richten sich auf gleicher Höhe aus und die Seite wirkt "gesetzt".
Ein Baseline-Grid Pixel für Pixel zu verfolgen ist im Web schwierig, weil Schriftmetriken je nach Browser variieren. Der praktische Ansatz ist daher, eine konsistente vertikale Abstandsskala aufzubauen statt einer perfekten Baseline: Jeden Abstand als Vielfaches von 4 oder 8 zu halten, ergibt einen Rhythmus, der regelmäßig genug ist, dass das Auge den Unterschied nicht erfasst.
Umsetzung mit CSS Grid
In modernen Browsern braucht man keine separate Bibliothek, um ein 12-Spalten-Grid zu bauen; CSS Grid macht das direkt. Das folgende Beispiel definiert 12 Spalten, einen festen Steg und einen responsiven Rand:
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px; /* Steg */
max-width: 1200px;
margin-inline: auto; /* Seite zentrieren */
padding-inline: 24px; /* Rand */
}
/* Eine Karte über 4 Spalten */
.card {
grid-column: span 4;
}
/* Ein breiter Block, 8 Spalten, von rechts beginnend */
.feature {
grid-column: 5 / 13;
}Auf dem Smartphone genügt eine einzige Media Query, um 12 Spalten auf eine zu reduzieren. Entscheidend ist, die Spaltenzahl am Inhalt auszurichten, nicht die Karten zusammenzudrücken:
@media (max-width: 760px) {
.layout { grid-template-columns: 1fr; gap: 16px; }
.card, .feature { grid-column: 1 / -1; }
}Um den vertikalen Rhythmus zu wahren, vereinfacht das Definieren einer Abstandsskalen-Variable die Arbeit. Sobald du jeden vertikalen Abstand an diese Stufen bindest, hast du die Baseline-Logik in Code übertragen:
:root {
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 40px;
}
h2 { margin-block: var(--space-4) var(--space-2); }
p { margin-block: 0 var(--space-3); }Das Grid bewusst brechen
Das Grid ist eine Referenz, kein Gefängnis. Die eindrucksvollsten Designs sind oft jene, die das Grid aufstellen und es dann bewusst brechen: ein Bild so vergrößern, dass es eine Spaltenkante überläuft, oder eine Überschrift in den Rand schieben, fängt den Blick. Die Regel ist einfach: Um zu brechen, musst du erst aufbauen. Ohne System ist "Brechen" nicht von Zufall zu unterscheiden. Ist das Grid solide, wird eine einzige Ausnahme zu einer starken Betonung; ohne Grid wirkt alles wie eine Ausnahme.
Häufige Fehler
- Zu viele Spalten: 24 Spalten wirken flexibel, doch für die meisten Projekte sind 12 mehr als genug und leichter zu handhaben.
- Stege vergessen: ohne Stege kleben Spalten aneinander; selbst bei korrekter Ausrichtung wirkt das Design beengt.
- Willkürliche Abstände: zufällige Werte wie 13px, 19px, 27px brechen den Rhythmus. Lege jeden Abstand auf Vielfache von 4 oder 8 fest.
- Das Grid unverändert auf Mobil übertragen: die 12 Spalten des Desktops auf einen schmalen Bildschirm zu zwängen erzeugt Unlesbarkeit; reduziere die Spaltenzahl.
Häufige Fragen
Wie viele Spalten sollte mein Grid haben?
Für Web-Interfaces ist 12 Spalten die gängigste und flexibelste Wahl, weil es sich sauber in 2, 3, 4 und 6 Teile teilt. Für einfache Inhaltsseiten genügen auch 6 oder 8 Spalten; wichtig ist, ein System zu wählen und ihm treu zu bleiben.
Ist ein Baseline-Grid im Web wirklich nötig?
Ein pixelgenaues Baseline-Grid ist im Web meist vergebliche Mühe. Baue stattdessen eine Abstandsskala, die jeden vertikalen Abstand als Vielfaches von 4 oder 8 hält; das gibt dasselbe Gefühl von Ordnung mit viel weniger Aufwand.
Sollte ich CSS Grid oder Flexbox verwenden?
Für zweidimensionale Seitenlayouts (wo Zeilen und Spalten zusammen verwaltet werden) ist CSS Grid ideal. Für Elemente auf einer einzigen Achse (eine Navigationsleiste, eine Button-Gruppe) ist Flexbox praktischer. Beide zusammen zu nutzen ist der gängigste Ansatz.
Das Layout von Anfang an richtig anzulegen ist weit schneller als dutzende kleine Ausrichtungskorrekturen im Nachhinein. Für ein skalierbares Grid-System und Interface-Design, das zu deiner Marke passt, nimm Kontakt mit mir auf.