Warum verwenden Layout-Raster 12 Spalten?

Teilbarkeit — 12 lässt sich gleichmäßig in Hälften, Drittel, Viertel und Sechstel aufteilen, sodass die meisten Layouts ohne Brüche darauf passen. Schmalere Bildschirme brauchen weniger Optionen, weshalb sich 4 Spalten auf dem Handy und 8 auf dem Tablet als praktische Konvention durchgesetzt haben.

Was sind Standard-Breakpoints?

Werte um 768px und 1200px tauchen in vielen Systemen immer wieder auf, aber die ehrliche Regel lautet: Der Inhalt setzt die Breakpoints — du fügst einen dort ein, wo das Layout zu versagen beginnt, nicht dort, wo eine Geräte-Tabelle es vorschreibt.

Wie breit sollten Stege sein?

Üblich sind 16px auf Handys und rund 24px auf größeren Bildschirmen — proportional etwa ein Viertel bis ein Drittel der Breite einer Spalte, und nie breiter als der Seitenrand, sonst läuft das Layout an den Kanten aus.

Brauche ich mit CSS Grid noch ein Raster-System?

Nicht als Framework — display:grid hat die klassenbasierte Zeilen-/Spalten-Mechanik ersetzt. Aber als Design-System — vereinbarte Spalten, Stege und Ränder pro Breakpoint — ja: Das CSS wurde einfacher, die Design-Entscheidungen sind nicht verschwunden.

Welche maximale Containerbreite sollte ich verwenden?

Eine, die Textspalten lesbar hält — üblicherweise 1100–1400px. Berechne sie aus dem Layout: Spalten × Spaltenbreite + Stege + Ränder, geprüft gegen die Zeilenlänge, die dein Fließtext tragen kann.

Wie werden Rasterwerte zu Tokens?

Als Layout-Sektion — Breakpoints mit min-width, Spalten, Steg und Rand pro Stufe, plus die Containerbreite — exportiert zusammen mit Farbe und Schrift, sodass das Layout aus derselben Quelle stammt wie alles andere.

Layout-Raster & Breakpoints: Der praktische Leitfaden

Ein Layout-Raster ist der horizontale Vertrag der Seite: eine vereinbarte Anzahl von Spalten pro Breakpoint, mit festen Stegen dazwischen und Rändern darum herum, gegen die jeder Bildschirm komponiert. Das 12-Spalten-Raster fürs Desktop — 8 auf dem Tablet, 4 auf dem Handy — ist die praktische Konvention modernen Interface-Layouts, und dieser Hub sammelt unsere Leitfäden zu seiner Nutzung mit heutigem CSS; die schnellste Orientierung ist das Drei-Breakpoint-Raster, live.

Das Raster hat die Frameworks überlebt

Die klassenbasierten Raster-Frameworks starben, als CSS Grid erschien — niemand braucht mehr die col-md-6-Mechanik. Was überlebt hat, ist die Design-Ebene: Teams einigen sich weiterhin auf Spalten, Stege und Ränder, weil Layouts, die von vielen Menschen über viele Monate gebaut werden, ein gemeinsames Skelett brauchen, um zusammenzuhängen. Die Leitfäden hier behandeln das Raster als genau diese Vereinbarung, umgesetzt in ein paar Zeilen modernem CSS statt in einem Framework. Der intuitive Grund, warum die Vereinbarung überlebt, ist, dass Ausrichtung als Absicht gelesen wird: Elemente, die sich Kanten teilen, wirken bewusst gesetzt, Dutzende leicht unterschiedlicher Breiten wirken zufällig, und ein gemeinsames Spaltenset macht das Erste zum Standard statt zu einem Akt der Wachsamkeit. Was ist ein 12-Spalten-Raster baut den Fall von null auf — warum zwölf, was seine Teilbarkeit einbringt — und das Raster in reinem CSS bauen zeigt die moderne Umsetzung: ein paar Custom Properties und eine einzige display: grid-Regel dort, wo früher das Framework war.

Drei Zahlen pro Breakpoint

Jede Stufe des Rasters besteht aus Spalten, Steg und Rand — und die Arithmetik verknüpft sie: Feste Stege und Ränder gehen vom Container ab, die Spalten teilen sich den Rest. Unsere Leitfäden behandeln die Proportionen des Trios, warum die Spaltenzahl auf kleineren Bildschirmen sinkt, wo Breakpoints tatsächlich hingehören (Inhalt, nicht Geräte) und die Containerbreite, die Text lesbar hält — wobei die Zeilenlängen-Argumentation aus unserem Typografie-Leitfaden die Bindung übernimmt. 4, 8, 12: Spalten pro Breakpoint erklärt, warum die Zahl auf kleineren Bildschirmen sinkt — weniger sinnvolle Layouts, nicht andere Mathematik; Breakpoints: Inhalt vor Geräten plädiert dafür, eine Stufe dort einzufügen, wo das Layout zu versagen beginnt, statt dort, wo eine Geräte-Tabelle es vorschreibt; eine maximale Containerbreite wählen berechnet die Obergrenze aus den Spalten selbst; und feste vs. fluide Spalten klärt, was sich dehnt und was zwischen den Stufen fest bleibt.

Auf dem Raster komponieren

Ein vereinbartes Raster verdient sich seinen Platz erst, wenn Inhalt darauf landet, und echte Layouts füllen selten zwölf gleiche Zellen. Spalten-Spans und Verschachtelung behandelt die Mechanik von Elementen, die vier, sechs oder acht Spalten einnehmen — und von Rastern in Rastern, wo die meisten Span-Fehler passieren. Manche Sektionen müssen den Container ganz verlassen, das ist das Full-Bleed-Problem: randlose Farbe hinter Inhalt, die sich trotzdem an den Spalten ausrichtet. Auf der Design-Tool-Seite spiegelt Layout-Raster in Figma dieselben Stufen, sodass Mockups und CSS gegen ein Skelett messen statt gegen zwei Annäherungen daran.

Eine Skala, Layout inklusive

Dieselbe Skala, die Schrift und Komponenten mit Abständen versieht, kann auch die Maße des Rasters stufen: Stege und Ränder als Stufen aus derselben Abstände-Skala, die Layout-Tokens exportiert neben Farbe und Schrift. Raster-Entscheidungen sind kein eigener Dialekt mehr — es ist dieselbe Single-Source-Geschichte, die design tokens erzählen, ausgeweitet auf das Skelett der Seite. So behandelt Scale Composer Layout: Breakpoints, Spalten, Stege und eine globale Containerbreite leben neben den Farb- und Schrift-Ansichten, gestuft von der einen Skala, die alle drei antreibt, und landen beim Export in derselben Tokens-Datei.

Leitfäden in diesem Hub

4, 8, 12: Spalten pro Breakpoint
Responsive Raster-Spalten fallen von 12 auf 8 auf 4, wenn Bildschirme schmaler werden, weil ein Raster nur dann führt, wenn eine Spalte eine nutzbare Größe hat — mit durchgerechneter Mathematik pro Stufe.
Breakpoints: Inhalt statt Geräte
CSS-Breakpoints gehören dorthin, wo das Layout versagt — Zeilenlänge, ausgehungerte Seitenleisten, gequetschte Cards — nicht auf eine Geräte-Tabelle. Warum fast standardmäßige Werte trotzdem funktionieren.
Container-Maximalbreite wählen
Container-Maximalbreite erklärt: warum Layouts nahe 1200px deckeln, die Rückwärtsrechnung von einer lesbaren Textspalte aus und wann ein fluides Layout richtig ist.
Das Raster in reinem CSS aufbauen
Ein CSS Raster-System in rund zwanzig Zeilen: Custom Properties tragen die Entscheidungen jedes Breakpoints, drei Klassen konsumieren sie, und Spans klammern sich pro Stufe.
Feste vs. fluide Spalten
Festes vs. fluides Raster: Die meisten modernen Layouts halten Stege und Ränder fest, während die Spalten zwischen den Breakpoints flexen — was jedes Modell bringt, mit echten Zahlen.
Layout-Raster in Figma einrichten
So richtest du ein Figma-Layout-Raster pro Breakpoint ein: stretch-Spalten mit festen Stegen und Rändern, als Rasterstile gespeichert, mit den Zahlen abgestimmt auf den Code.
Spaltenspannen und Verschachtelung
Wie grid column span funktioniert: die Span-Grammatik, Seiten-Muster wie 8+4 und 4+4+4, Spannen nach Inhalt und Ausrichtung wählen und Raster sauber verschachteln.
Vollbreite Sektionen in einem Container
Full-Bleed-CSS, ohne den Container zu verlassen: wie Heroes und Medienbänder die max-width durchbrechen, während ihr Inhalt am Raster bleibt — zwei moderne Muster.
Was ist ein 12-Spalten-Raster?
Ein 12-Spalten-Raster teilt die Seite in zwölf gleiche Spalten mit festen Stegen. Warum zwölf gewinnt: Hälften, Drittel, Viertel und Sechstel landen alle auf ganzen Spalten.

Bewege das Raster und beobachte die Seite

Raster-Proportionen lernst du am schnellsten unter den Pfeiltasten: stufe die Stege und Ränder durch die Skala — 4, 8 und 12 Spalten pro Breakpoint innerhalb eines globalen Containers — und beobachte, wie sich das Layout Schritt für Schritt strafft und atmet. Zehn Sekunden Stufen erklären die Steg-Proportion besser als jedes Diagramm.