Stege und Gaps: Abstände zwischen Spalten

Ein Steg ist der Abstand zwischen Spalten in einem Layout-Raster — die Distanz, die modernes CSS gap nennt. Übliche Breiten sind 16px auf Smartphones und 24px auf Tablets und Desktops, und in einem systematisierten Layout ist der Steg keine willkürliche Zahl, sondern ein Schritt der Abstands-Skala, pro Breakpoint gewählt.

Das Wort ist weit älter als CSS, und die Regeln für seine Größe sind proportional, nicht fest. Dieser Artikel behandelt, woher der Begriff kommt, wie breit Stege sein sollten, wie das Trio aus Spalte, Steg und Rand eine Seite aufteilt, und das CSS, das es umsetzt — eine Ecke des größeren Abstände-Systems.

Warum heißt es Steg?

Ein Erbe aus dem Druck. In einem gebundenen Buch ist der Steg (im Deutschen: Bundsteg) der innere Rand, wo zwei gegenüberliegende Seiten aufeinandertreffen — der Weißraum-Kanal, der in den Buchrücken läuft. Typografische Rastersysteme übernahmen das Wort für den Raum zwischen zwei beliebigen Textspalten, und das digitale Layout erbte es zusammen mit dem Großteil seines Spalten-Vokabulars aus diesen Druck-Rastern. CSS, das die Eigenschaft Jahrzehnte später standardisierte, wählte den schlichteren Namen: gap. Designer sagen eher Steg, Stylesheets sagen gap; beide benennen dieselbe Distanz.

Wie breit sollte ein Steg sein?

Die üblichen Antworten sind 16px auf Mobilgeräten und 24px auf Tablet und Desktop, und sie sind vernünftige Standardwerte direkt aus dem 8-Punkt-Raster. Aber feste Zahlen verbergen die eigentliche Regel, die proportional ist. Ein Steg bemisst sich an zwei Nachbarn:

• Die Spaltenbreite. Irgendwo zwischen einem Viertel und einem Drittel einer Spalte trennt sauber — breit genug, dass benachbarte Spalten nicht ineinanderlaufen, schmal genug, dass die Seite nicht in Streifen zerfällt.
• Der Seitenrand. Der Steg sollte den Rand nicht übersteigen. Tut er es doch, läuft das Layout an den Kanten aus: Die äußersten Spalten sitzen näher am Viewport-Rand als an ihren eigenen Nachbarn.

Der wahrnehmungspsychologische Mechanismus hinter beiden Regeln ist die Gruppierung durch Nähe, im Vokabular der Gestaltpsychologie: Dinge, die durch weniger Raum getrennt sind, werden als zusammengehörig wahrgenommen. Spalten halten als eine Seite zusammen, weil der Raum zwischen ihnen sichtbar kleiner ist als der Raum um sie herum. Kehrt man dieses Verhältnis um, beginnen die äußeren Spalten, sich mit dem Viewport-Rand zu gruppieren statt miteinander.

Wie hängen Spalten, Stege und Ränder zusammen?

Die drei Mitglieder des Trios verhalten sich bewusst unterschiedlich:

Eine Formel bindet sie zusammen: Spaltenbreite = (Container − 2 × Rand − (n − 1) × Steg) ÷ n. Die festen Mitglieder werden zuerst abgezogen; die Spalten teilen sich, was übrig bleibt. Deshalb sind Stege und Ränder natürliche Skalen-Schritte, Spaltenbreiten dagegen selten — die Spalten sind der Ort, an dem die Arithmetik nachgibt.

Wie sehen echte Zahlen bei 4, 8 und 12 Spalten aus?

Mit der Abstands-Skala, erzeugt aus einer 16px-Basis, Ratio 2 und zwei Noten pro Verdopplung — 8, 11, 16, 23, 32, 45, 64 — ist der Schritt, der dem konventionellen 24 am nächsten liegt, die 23 (16 × 2^(1/2) = 22,63, gerundet):

Die Summen gehen Zeile für Zeile auf: 4 × 73,75 + 3 × 16 + 2 × 16 = 375 und 12 × 73,58 + 11 × 23 + 2 × 32 = 1200. Zwei Dinge sind bemerkenswert. Die Spaltenbreiten pendeln über alle drei Breakpoints zwischen 73 und 77px — verschiedene Geräte, gleich wirkende Spalten — während das Verhältnis von Steg zu Spalte im Bereich von einem Viertel bis einem Drittel bleibt (16 / 73,75 ≈ 22% auf Mobil, 23 / 73,6 ≈ 31% auf Desktop). Und der Rand fällt nie unter den Steg.

Öffne dieses Raster mit drei Breakpoints in Scale Composer — die Rasteransicht zeigt standardmäßig 4, 8 und 12 Spalten pro Breakpoint innerhalb einer globalen Container-Maximalbreite, mit Stegen und Rändern aus derselben Skala wie alles andere.

Wie sieht das CSS für einen Steg aus?

grid-template-columns deklariert die Spalten; gap ist der Steg:

.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);  /* fluide Spalten */
  gap: 23px;                               /* Steg — ein Skalen-Schritt */
  max-width: 1200px;                       /* Container */
  padding-inline: 32px;                    /* Seitenrand, ein Schritt höher */
  margin-inline: auto;
}

Die 1fr-Spalten sind das fluide Mitglied des Trios: Der Browser rechnet bei jeder Viewport-Breite dieselbe Rest-Arithmetik wie die Tabelle oben. gap funktioniert auch in Flexbox und im Multi-Column-Layout und kennt eine Zwei-Wert-Form — gap: 32px 23px setzt Zeilen- und Spaltenabstände getrennt, was in dem Moment relevant wird, in dem ein Raster auf mehr als eine Zeile umbricht. Bevor gap in Grid und Flexbox verfügbar war, wurden Stege mit Rändern an den Spalten und einem negativen Rand am Container nachgebaut — ein Muster, das man in älteren Codebasen erkennen, aber nicht wiederholen sollte.

Schalte die Stege durch die Skala

Größenregeln bleiben schneller hängen, wenn sich das Layout bewegt. Lade den Desktop-Breakpoint und schalte den Steg durch benachbarte Skalen-Schritte — 16, 23, 32 — während der Rand bei 32 bleibt: Bei 16 beginnen die zwölf Spalten zu drängen, und bei 32 holt der Steg den Rand ein und die Seite verliert ihren Rahmen. Ein Tastendruck pro Schritt ist das ganze Experiment — schalte die Stege und Ränder mit den Pfeiltasten durch die Skala in Scale Composer.