4, 8, 12: Spalten pro Breakpoint

Leg ein 12-Spalten-Raster auf ein 375px-Handy und sieh zu, was damit passiert. Selbst wenn du die Ränder auf null setzt und die Stege auf 8px zusammenquetschst, kommt jede Spalte auf (375 − 11 × 8) ÷ 12 ≈ 24px Breite. Nichts Echtes passt in eine — kein Button, kein Eingabefeld, kein Thumbnail. Eine bescheidene 300px-Karte überspannt zehn der zwölf Spalten, also wählt am Ende jedes Element zwischen „fast allem” und „allem”, die Spannweiten dazwischen bleiben ungenutzt, und das Raster zeichnet weiter Hilfslinien, ohne eine einzige der Entscheidungen zu leiten.

Responsive Raster senken deshalb die Spaltenanzahl, statt die Spalten zu verkleinern: 4 Spalten auf Handys, 8 auf Tablets, 12 auf Desktops, wobei die Spaltenbreite über alle drei hinweg ungefähr konstant bleibt. Die Anzahl ist der Hebel, der sich anpasst; die Einheit bleibt eine sinnvolle Größe. Dieser Artikel — Teil unseres Layout-Raster-Leitfadens — erklärt, warum diese Umkehrung funktioniert, wie die echten Zahlen pro Stufe aussehen und wie ein Layout über sie hinweg abgebildet wird.

Warum sinkt die Spaltenanzahl, statt dass die Spalten schrumpfen?

Weil ein Raster nur so lange führt, wie seine Einheit eine sinnvolle Größe hat — eine Breite, die etwas auf der Seite tatsächlich haben könnte. Wenn eine Spalte ≈24px misst, ändert das Verschieben einer Grenze um eine Spalte fast nichts, und kein echtes Element belegt ein paar zählbare Spalten; das Raster ist zur Dekoration geworden. Auf einem 4-Spalten-Handy-Raster ergibt derselbe 375px-Viewport mit 16px-Stegen und -Rändern Spalten von (375 − 32 − 48) ÷ 4 ≈ 74px — und jetzt bilden sich die Spannweiten auf die Layouts ab, die ein Handy wirklich nutzt: 4 ist volle Breite, 2 ist eine Hälfte, 1 ist eine viertelbreite Einheit für Icons und Avatare. Jede verfügbare Spannweite ist wieder eine echte Wahl.

Warum 4, 8 und 12 — und nicht eine andere Leiter?

Jede Anzahl passt zum Layout-Vokabular ihres Bildschirms. Ein Handy komponiert in Ganzen, Hälften und gelegentlich einem Viertel — 4 Spalten decken genau das ab. Ein Tablet fügt zweispaltige Anordnungen und schmale Sidebars hinzu — 8 Spalten bringen nutzbare Viertel (Spannweiten von 2) und Sidebar-Aufteilungen wie 5 + 3 und 6 + 2. Ein Desktop braucht das volle Vokabular, Drittel eingeschlossen — das sind 12.

Die Leiter bewahrt außerdem die Proportion über die Stufen hinweg. Weil sich 4 zu 8 verdoppelt, bleiben Hälften Hälften (2 von 4, 4 von 8) und Viertel bleiben Viertel (1 von 4, 2 von 8); 12 behält beide (6 und 3) und fügt Drittel hinzu. Ein 8-Spalten-Tablet-Layout von 6 + 2 bildet sich per direkter Proportion auf die 9 + 3 des Desktops ab. Designs übertragen sich nicht zufällig über die Stufen — die Anzahlen sind so gewählt, dass sie es können.

Was ändert sich pro Breakpoint — und was bleibt konstant?

Weniger, als du vielleicht denkst. Hier sind die Grid-View-Voreinstellungen von Scale Composer, wobei die Raster-Gesamtbreite als Spalten × Spaltenbreite + (Spalten − 1) × Steg + 2 × Rand berechnet wird:

Die Gesamtwerte gehen Zeile für Zeile auf: 4 × 66 + 3 × 16 + 2 × 16 = 344, gerade noch innerhalb der 375px-Vorschau; 8 × 66 + 7 × 24 + 2 × 29 = 754 ≈ 768; und 12 × 66 + 11 × 24 + 2 × 66 = 1188 ≈ 1200.

Lies die Spalten der Tabelle von oben nach unten, und die Arbeitsteilung ist offensichtlich. Stege und Ränder steigen bescheiden (16 → 24, 16 → 29 → 66). Die Spaltenbreite bewegt sich überhaupt nicht — 66px auf jeder Stufe, sodass sich eine Ein-Spalten-Einheit auf einem Handy genauso anfühlt wie auf einem Desktop. Die Spaltenanzahl trägt die gesamte Anpassung: 4, 8, 12.

Öffne das dreistufige Raster in Scale Composer — die Grid-View hält ein Layout-System pro Breakpoint, jedes mit eigenen Spalten, eigener Spaltenbreite, eigenem Steg und Rand, und die Maße durchlaufen mit den Pfeiltasten die gemeinsame Skala.

Wie bildet sich ein Layout über die Stufen ab?

Spaltenspannweiten sind Entscheidungen pro Stufe, keine skalierten Werte. Verfolge eine Landingpage mit drei Abschnitten durch alle drei Stufen:

Beachte, wozu die mittlere Spalte zwingt. Acht hat keine Drittel, also kann die Kartenreihe die Reise vom Desktop nicht als Reihe überstehen — die ehrlichen Optionen sind zweispaltig mit der dritten Karte darunter oder ein voller Stapel. Und das 8 + 4-Artikel-Layout wird auf dem Tablet nicht zu „5,3 + 2,7”; es wird zu einer anderen Entscheidung (Inhalt volle Breite, Sidebar degradiert). Eine Stufe mit weniger Spalten ist kein geschrumpfter Desktop — sie ist ein kleineres Vokabular, und das Layout wird darin neu formuliert.

In CSS ist das eine grid-template-columns-Deklaration pro Stufe innerhalb von Media Queries — wo diese Stufengrenzen sitzen sollten, ist eine Frage von Inhalt, nicht Gerätemodellen. Die Mechanik ist in MDNs Referenz zu CSS grid layout dokumentiert. Was der Code nicht für dich entscheiden kann, ist die Neuformulierung selbst: welche Spannweiten jede Stufe bekommt, ist Design, keine Arithmetik.

Prüfe die Gesamtwerte auf jeder Stufe

Der Tabelle oben vertraust du leichter, nachdem du sie kaputt gemacht hast. Lade die drei Stufen und ändere jeweils eine Variable: senk den Desktop von 12 Spalten auf 8 und sieh dir die Spaltenbreite an, die die übrig gebliebene Arithmetik zurückgibt; erhöhe einen Steg um eine Skalenstufe und sieh zu, wie die Raster-Gesamtbreite von ihrem Breakpoint wegdriftet. Die Gesamtwerte berechnen sich live neu, sodass jede Konfiguration ihre eigene Arithmetik zeigt — prüf die Stufen-Gesamtwerte selbst in Scale Composer.