Grid-Systeme im Web: 12-Spalten, CSS Grid, Flexbox

Grid-Systeme im Web sind strukturierende Rastersysteme, die Inhalte in horizontale und vertikale Einheiten ordnen und so konsistente, skalierbare Layouts für verschiedene Bildschirmgrößen ermöglichen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: Spaltenraster, CSS-Raster, Layout-Grid, Flex-Layout

Was sind Grid-Systeme im Web?

Das Raster ist eines der ältesten Werkzeuge der Gestaltung – von Gutenbergs Bleisatz bis zum modernen Zeitschriftenlayout. Im Web übernehmen Rastersysteme dieselbe Funktion: Sie schaffen visuelle Ordnung, ermöglichen Ausrichtung und machen Layouts skalierbar.

Im Web-Kontext gibt es drei wesentliche Rastersysteme, die Designer kennen sollten:

1. Das klassische 12-Spalten-Raster – ein konzeptionelles Framework für die Designarbeit
2. CSS Flexbox – ein eindimensionales Layout-Modell für Zeilen oder Spalten
3. CSS Grid – ein zweidimensionales Layout-Modell für komplexe Seitenlayouts

Alle drei koexistieren und werden je nach Anwendungsfall kombiniert.

Erklärung

Das 12-Spalten-Raster

Das 12-Spalten-Raster ist kein Code-Konzept, sondern ein Designkonzept: Ein Container wird in 12 gleichbreite Spalten unterteilt. Die Zahl 12 ist dabei kein Zufall – sie lässt sich durch 1, 2, 3, 4, 6 und 12 teilen, was maximale Flexibilität für symmetrische und asymmetrische Layouts gibt.

Typische Layouts:

• 3 gleiche Spalten: je 4 von 12
• 2/3 + 1/3: 8 und 4 Spalten
• Halbe/Halbe: 6 und 6 Spalten
• Volle Breite: 12 von 12

Frameworks wie Bootstrap oder Material Design basieren auf diesem System. In Figma wird das Raster über das Spalten-Grid definiert: Spaltenanzahl (12), Rinne zwischen Spalten (Gutter, z. B. 24 px) und Außenabstände (Margins, z. B. 80 px links/rechts auf Desktop).

Für Responsive Design: Grundlagen und Breakpoints werden unterschiedliche Spaltenanzahlen je nach Breakpoint definiert: typischerweise 4 Spalten auf Smartphone, 8 auf Tablet, 12 auf Desktop.

CSS Flexbox

Flexbox (Flexible Box Layout) ist ein CSS-Layoutmodell für eindimensionale Anordnungen – also entweder in einer Zeile oder einer Spalte. Es ist besonders nützlich für:

• Navigationsleisten
• Karten-Reihen
• Vertikale/horizontale Zentrierung von Elementen
• Gleichmäßige Verteilung von Elementen

Aus Designer-Sicht entspricht Flexbox dem Figma-Auto-Layout: Elemente werden entlang einer Achse angeordnet, können abstände gleichmäßig verteilen und sich automatisch umbrechen.

Wichtige Konzepte:

• Hauptachse: Die Richtung der Anordnung (horizontal = Row, vertikal = Column)
• Kreuzachse: Die senkrechte Richtung dazu
• Justify: Ausrichtung entlang der Hauptachse
• Align: Ausrichtung entlang der Kreuzachse
• Wrap: Zeilenumbruch bei zu wenig Platz

CSS Grid

CSS Grid ist ein zweidimensionales Layout-System für Zeilen und Spalten gleichzeitig. Es eignet sich für komplexe Seitenlayouts, Masonry-Layouts (Pinterest-Stil), Magazine-artige Kompositionen und jede Anordnung, bei der Elemente über mehrere Zeilen und Spalten hinweggehen sollen.

Aus Designer-Sicht ist CSS Grid das, was in Figma ein Grid-Layer mit expliziten Zeilen und Spalten ist. Ein Element kann mehrere Zeilen und Spalten überspannen.

Typische Anwendungen:

• Das Gesamtlayout einer Seite (Header, Sidebar, Main, Footer)
• Blog-/Portfolio-Galerien
• Dashboard-Layouts

Wann was verwenden?

Beispiele

Portfolio-Galerie: Drei Bilder nebeneinander auf Desktop, zwei auf Tablet, eins auf Mobile – CSS Grid mit Auto-Fill ermöglicht das ohne Breakpoint-Code.

Karten-Komponente: Eine Karte mit Icon links und Text rechts – Flexbox mit flex-direction: row.

Redaktionelles Layout: Ein Header, der über alle 12 Spalten geht, daneben ein Teaserbild über 7 Spalten und ein Sidebar-Teaser über 5 – CSS Grid.

In der Praxis

Raster in Figma

In Figma wird ein Raster über Frame > Layout Grid definiert. Empfehlenswert sind:

• Spalten-Grid: 12 Spalten, Gutter 24 px, Margin 80 px (Desktop)
• Zeilen-Grid: 8er-Raster als Baseline für vertikale Abstände

Das 8px-Raster (8pt Grid) ist im Web-Design de facto Standard: Es gewährleistet, dass Abstände, Größen und Positionen auf ganzzahligen Werten basieren, die auf Bildschirmen verschiedener Dichte scharf bleiben (Busche & Knaap, 2019).

Gutter und Margin

• Gutter: Abstand zwischen Spalten (innen). Typisch 16–32 px, je nach Projektskalierung.
• Margin: Außenabstand des Rasters vom Seitenrand. Auf Desktop großzügig (80–120 px), auf Mobile minimal (16–24 px).

Grid in Design Systems

Gut definierte Raster sind ein Kernbestandteil von Design Systems: Von Figma zu Code. Sie stellen sicher, dass alle Komponenten miteinander ausgerichtet sind und Entwickler beim Handoff an Entwickler: Figma, Zeplin, Storybook eindeutige Maße erhalten.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Muss ich CSS-Code verstehen, um Grid-Systeme zu verwenden? Als Designer reicht ein konzeptionelles Verständnis. Wichtig ist zu wissen, was technisch möglich ist, um realistische Layouts zu entwerfen und sinnvoll mit Entwicklern zu kommunizieren.

Was ist besser, Flexbox oder Grid? Keines ist besser – sie lösen unterschiedliche Probleme. Professionelle Projekte verwenden beide.

Wie viele Spalten brauche ich wirklich? 12 ist der Standard, 4 für mobile Designs. Aber: Ein simples Projekt kann auch mit 6 oder 8 Spalten auskommen. Das Raster ist Mittel zum Zweck, nicht Selbstzweck.

Verwandte Einträge

• Responsive Design: Grundlagen und Breakpoints – Wie sich Raster bei verschiedenen Bildschirmgrößen verändern
• Mobile First: Design-Philosophie – Raster vom kleinsten Bildschirm aus denken
• Design Systems: Von Figma zu Code – Raster als Teil eines Design Systems
• Handoff an Entwickler: Figma, Zeplin, Storybook – Raster-Werte an Entwickler übergeben
• Dark Mode Design: Farben und Kontraste – Wie Raster im Dark Mode wirken

Weiterführend

• Müller-Brockmann, J. (1981). Grid Systems in Graphic Design. Arthur Niggli. Sulgen.
• Weyl, E. (2020). CSS: The Definitive Guide. 5. Aufl. O'Reilly Media.
• Busche, L. & Knaap, W. (2019). The 8-Point Grid.
• MDN Web Docs (2024). CSS Grid Layout.
• Bootstrap Documentation (2024). Grid system.