Was ist ein 12-Spalten-Raster?

Ein 12-Spalten-Raster teilt die Seite in zwölf gleich breite Spalten, getrennt durch feste Stege, und Elemente werden dimensioniert, indem sie ganze Spalten überspannen — eine Seitenleiste überspannt drei, der Hauptinhalt neun. Die Spalten selbst sind ein unsichtbares Gerüst; was der Leser wahrnimmt, ist die Ausrichtung, denn jeder Block auf der Seite beginnt und endet an derselben kleinen Menge von Kanten.

Es ist seit fast zwei Jahrzehnten die gängige Konvention für Interface-Layouts und hat die Frameworks überlebt, die es populär gemacht haben. Dieser Artikel — der Anker unseres Leitfadens zum Layout-Raster — erklärt, warum die Zahl zwölf ist, woher die Konvention kommt, aus welchen Teilen sie besteht und wie die Arithmetik mit echten Zahlen aussieht.

Warum zwölf Spalten und nicht zehn oder sechzehn?

Teilbarkeit. Zwölf lässt sich glatt durch 2, 3, 4 und 6 teilen, also landen die Aufteilungen, aus denen Seiten tatsächlich aufgebaut sind — Hälften, Drittel, Viertel, Sechstel — allesamt auf ganzen Spalten:

Zehn beschert dir Fünftel — eine Aufteilung, die Layouts selten verlangen — zum Preis von Dritteln und Vierteln, die sie ständig verlangen. Sechzehn behält Hälften, Viertel und Achtel, verliert aber Drittel, und Drittel sind das Rückgrat von Kartenreihen und Feature-Abschnitten. Zwölf ist die kleinste Anzahl, die jede Aufteilung behält, zu der Designer routinemäßig greifen.

Die anschauliche Version: Ein Raster hilft nur, solange das gewünschte Layout auf ganzen Spalten landet. In dem Moment, in dem ein Design eine halbe Spalte braucht, hat das Raster aufgehört, eine Hilfe zu sein, und ist zu einem Hindernis geworden. Zwölf macht diesen Moment selten.

Woher kommt das 12-Spalten-Raster?

Zeitungen teilten ihre Seiten schon lange vor Bildschirmen in Spalten, aus praktischen Gründen — kurze Zeilen setzen sich schneller und lesen sich dichter. Josef Müller-Brockmann und die Schweizer Schule der Mitte des 20. Jahrhunderts machten aus dieser Praxis eine formale Gestaltungsmethode — Rastersysteme als das rationale Skelett unter einer Seite. Das Web einigte sich dann speziell über 960.gs und später Bootstrap auf zwölf, deren klassenbasierte Raster 12 Spalten zum Standardvokabular einer Generation von Entwicklern machten; CSS Grid machte die Framework-Maschinerie schließlich überflüssig, und die Konvention überlebte auch ohne sie — weil immer die Übereinkunft, nicht der Code, der nützliche Teil war.

Aus welchen Teilen besteht ein 12-Spalten-Raster?

Vier, mit bewusst unterschiedlichem Verhalten:

• Spalten — die zwölf fluiden Einheiten. Ihre Breite wird nicht direkt gewählt; sie ist das, was übrig bleibt, nachdem die festen Teile abgezogen wurden.
• Stege — die festen Zwischenräume zwischen den Spalten, elf an der Zahl.
• Ränder — der feste Raum an jeder Seite, zwischen den äußersten Spalten und der Kante des Containers.
• Container — die Obergrenze des gesamten Gefüges. Unterhalb seiner max-width ist das Raster fluid; darüber hinaus hört das Layout auf zu wachsen.

Eine Zeile bindet sie zusammen: Stege und Ränder werden zuerst abgezogen, und die zwölf Spalten teilen sich, was übrig bleibt. Das ist die gesamte Arithmetik — wie breit Stege und Ränder sein sollten, ist eine Frage der Abstände mit ihren eigenen proportionalen Regeln.

Wie sieht die Arithmetik mit echten Zahlen aus?

Nimm einen Container von 1200px mit 23px Stegen und 32px Rändern — Steg und Rand jeweils Stufen einer Abstandsskala:

fixed width   = 2 × 32 + 11 × 23 = 64 + 253 = 317px
leftover      = 1200 − 317       = 883px
column width  = 883 ÷ 12         ≈ 73.6px

Bilde nun Layouts darauf ab. Die Breite einer Spanne sind ihre Spalten plus die Stege innerhalb von ihr — eine Spanne schluckt die Stege, die sie überquert:

Die Inhalts-Spanne ergibt 8 × 73,6 + 7 × 23 ≈ 750px, die Seitenleiste 4 × 73,6 + 3 × 23 ≈ 363px. Addiere den einen Steg, der sie noch trennt — 750 + 23 + 363 = 1136 — und du bist wieder beim Container abzüglich seiner Ränder (1200 − 64). Die Rechnung geht auf jeder Ebene auf, und genau das macht ein Raster prüfbar statt bloß ungefähr.

Öffne diese 12-Spalten-Anatomie in Scale Composer — Spalten, Steg, Rand und Container werden in der Rasteransicht jeweils pro Breakpoint gesetzt, die Maße durchlaufen mit den Pfeiltasten die gemeinsame Abstandsskala, und die Restwert-Arithmetik rechnet sich bei jedem Schritt neu.

Was sind die gängigen Spannen-Muster?

Eine Handvoll Muster deckt die meisten Seiten ab, und sie alle ergeben sich direkt aus der Teilbarkeitstabelle:

Asymmetrische Varianten — 9 + 3, 7 + 5 — sind ebenso legitim; sie tauschen die sauberen Aufteilungen gegen eine gezieltere Gewichtung.

Muss sich alles an den Spalten ausrichten?

Nein — und das ist die häufigste Überinterpretation des Systems. Das Raster positioniert Container, nicht deren Inhalte. Eine Karte, die vier Spalten überspannt, braucht ihr internes Padding, ihren Button oder ihre Zeilenumbrüche nicht auf Spaltenkanten landen zu lassen; innerhalb der Karte übernehmen die eigenen Abstands-Regeln der Karte. Jedes innere Element auf das Seitenraster zu zwingen, erzeugt Layouts, die technisch ausgerichtet und praktisch starr sind. Das 12-Spalten-Raster ist eine Übereinkunft auf Seitenebene darüber, wo Blöcke beginnen und enden — die oberste Ebene einer Hierarchie, kein Gesetz, das bis ganz nach unten reicht.

Leg deine eigenen Spannen aufs Raster

Muster bleiben schneller hängen, wenn du sie selbst platzierst. Lade das 12-Spalten-Raster und geh die Layouts der Tabelle durch — 8 + 4, dann 6 + 6, dann 4 + 4 + 4 — und beobachte, wie jede Spanne ihre inneren Stege schluckt. Der CSS-Export der Rasteransicht schreibt dieselbe Arithmetik als Media Queries mit den Klassen .grid und .col-1 bis .col-12, wobei Spannen auf die Spaltenanzahl des aktiven Breakpoints begrenzt werden, sodass das, was du auslegst, auch das ist, was ausgeliefert wird — leg Spannen aufs 12-Spalten-Raster in Scale Composer.