Die Raster-Ansicht

Breakpoints, Spalten, Stege, Ränder und eine globale Maximalbreite — wo jede Maßangabe dieselbe Skala durchschreitet wie deine Typografie und deine Farbe.

Die Werkzeugleiste

Jeder Breakpoint ist ein Tab: standardmäßig Mobil, Tablet, Desktop (4 / 8 / 12 Spalten — die Branchenkonvention), mit Min-Width, Vorschaubreite, Spaltenzahl, Steg und Rand. Füge Breakpoints frei hinzu oder entferne sie; die Beschriftungen sind Inhalt und bearbeitbar.

Max-Width ist global und — wenn aktiviert — eine harte Obergrenze: ein Pfeilschritt, der die Gesamtbreite darüber hinausschieben würde, wird mit einem Toast gestoppt, statt still zu gelingen und hinterher zu warnen. Die eine verbleibende Warn-Pill erscheint nur, wenn du die Obergrenze unter eine bestehende Gesamtbreite senkst.

Schrittweise verstellen

Wähle eine Spalte, einen Steg oder einen Rand und:

• ← / → — verstelle die Maßangabe schrittweise durch die globale Skala. Ein Steg bewegt sich 16 → 21 → 28, nie auf einen beliebigen Wert.
• Shift+← / → — ändere die Spaltenzahl.

Genau darum liegt das Raster im selben Tool: der Weißraum-Rhythmus deines Layouts und der Größen-Rhythmus deiner Typografie stammen aus derselben Progression, sodass sie nicht heimlich auseinanderdriften können.

Die Grundlinie wird nicht hier festgelegt

Die Bühne zeigt das Grundlinienraster, aber die Grundlinien-Einheit wird aus der Skala abgeleitet — Basis ÷ 2, angezeigt mit ausgeschriebener Ableitung (8px (16/2)). Ändere die Basis in der Topbar, und die Grundlinie folgt. Die Raster-Ansicht zeigt sie an; die Skala besitzt sie.

Das Spalten-Overlay der Typografie-Ansicht spiegelt den größten Breakpoint von hier — ein Besitzer, eine Richtung der Wahrheit.

Theorie

Anleitungen zum Layout-Raster — Spalten-Anatomie, Steg-Proportionen, die Wahl der Breakpoints — und Anleitungen zu Abständen für das 8-Punkt-Denken, auf dem die Grundlinie aufbaut.