Fluid-Spacing-Generator

Fließende Abstände für Padding, Margin und Gap als clamp()-Skala erzeugen – mit Live-Vorschau und Export für CSS und Tailwind.

Der Fluid-Spacing-Generator erzeugt eine Skala fließender Abstände für Padding, Margin und Gap. Aus einem kleinen und einem großen Basiswert berechnet er für neun Stufen von 3xs bis 3xl je einen clamp()-Wert, optional auch Paare wie „s bis m“. Abstände wachsen so stufenlos mit dem Viewport. Ausgabe als CSS-Variablen oder Tailwind-Theme, mit Live-Vorschau.

Basis klein (s)

Basis groß (s)

Ab Viewport-Breite

Bis Viewport-Breite

Root-Schriftgröße

Paare zwischen benachbarten Stufen erzeugen

Vorschau-Viewport px

3xs
4.4px
2xs
8.8px
xs
13.2px
s
17.6px
m
26.4px
l
35.2px
xl
52.8px
2xl
70.4px
3xl
105.6px

Beispiel: Karten mit Padding „m“ und Gap „s“

:root {
  --space-3xs: clamp(0.25rem, 0.2321rem + 0.0893vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4643rem + 0.1786vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6964rem + 0.2679vw, 0.9375rem);
  --space-s: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3929rem + 0.5357vw, 1.875rem);
  --space-l: clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.7143rem + 1.4286vw, 5rem);
  --space-3xl: clamp(6rem, 5.5714rem + 2.1429vw, 7.5rem);
  --space-3xs-2xs: clamp(0.25rem, 0.1429rem + 0.5357vw, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.375rem + 0.625vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.75rem + 1.25vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.4286rem + 2.8571vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 3rem + 5vw, 7.5rem);
}

.card {
  padding: var(--space-m);
  margin-block: var(--space-l);
}

.grid {
  gap: var(--space-s);
}

Was sind fluide Abstände?

Fluide Abstände sind Längen für Padding, Margin und Gap, die sich per clamp() zwischen zwei Viewport-Breiten stufenlos verändern. Eine Skala aus Stufen von 3xs bis 3xl hält das Layout konsistent, während es sich der Bildschirmgröße anpasst.

Die Stufen

Stufe	Faktor	Typischer Einsatz
3xs, 2xs	0,25 / 0,5	Abstand zwischen Icon und Text
xs, s	0,75 / 1	Innenabstand von Buttons und Inputs, Gap in Listen
m, l	1,5 / 2	Karten, Formularblöcke
xl bis 3xl	3 bis 6	Sektionen, große Container

So gehst du vor

Basiswerte und Viewport-Breiten eintragen.
Vorschau prüfen und Paare bei Bedarf aktivieren.
Export kopieren. Feste Skalen erzeugst du im Spacing-Skala-Generator, die Berechnung einzelner Werte im clamp()-Rechner.

Beispiel

Mit 16 px (bei 320 px) und 20 px (bei 1440 px) für „s“ ist „m“ mobil 24 px und am Desktop 30 px. Karten bekommen padding: var(--space-m), die Kartenreihe gap: var(--space-s). Die Dichte einzelner Komponenten planst du mit dem UI-Dichte-Rechner.

Häufige Fragen

Warum fluide Abstände?

Feste Abstände wirken auf dem Smartphone schnell zu groß und auf großen Bildschirmen zu klein. Fluide Abstände wachsen proportional mit der Breite. Layouts bleiben ausgewogen, ohne dass du für jeden Breakpoint neue Werte pflegst.

Was sind Paare wie s-m?

Ein Paar startet beim Minimum einer Stufe und endet beim Maximum der nächsten. Der Abstand verändert sich dadurch stärker als bei einer einzelnen Stufe, etwa für Sektionsabstände, die mobil kompakt und am Desktop luftig sein sollen.

Wie nutze ich die Variablen?

Als var(--space-m) in padding, margin oder gap. In Tailwind v4 entstehen aus --spacing-fluid-m die Klassen p-fluid-m, gap-fluid-m und weitere.

Welche Basiswerte sind sinnvoll?

Viele Systeme starten bei 16 px (kleiner Viewport) und 20 px (großer Viewport) für die Stufe „s“. Die Faktoren der anderen Stufen (0,25 bis 6) skalieren daraus.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.