ABSTÄNDE / GRÖSSEN / UTILITY-REFERENZ

Breiten & Höhen

Kombiniere feste Skalenwerte, relative Breiten und Grenzen. Numerische rem-Abmessungen folgen der Seitendichte; Prozentbreiten und feste Containergrenzen behalten ihre eigene Bedeutung.

Ausprobieren und übernehmen

Die Vorschauen verwenden die aktuell gewählten Demo-Einstellungen. Direkt unter jedem Beispiel steht das dazugehörige HTML.

Prozentbreiten

Die Elemente belegen jeweils die Hälfte bzw. drei Viertel der verfügbaren Breite.

w-1/2

w-3/4

w-full

HTML

<div class="grid gap-4 border rounded p-4 bg-surface">
  <div class="w-1/2 bg-accent rounded p-3">w-1/2</div>
  <div class="w-3/4 bg-subtle rounded p-3">w-3/4</div>
  <div class="w-full border rounded p-3">w-full</div>
</div>

Begrenzte Breite und Mindestgröße

max-w-md begrenzt die Lesebreite; min-h-24 gibt der Fläche eine Mindesthöhe.

Begrenzte Lesebreite

Wächst mit dem verfügbaren Platz bis zur Grenze.

HTML

<div class="max-w-md mx-auto min-h-24 border rounded p-6 bg-surface">
  <strong>Begrenzte Lesebreite</strong>
  <p class="text-muted mt-2">Wächst mit dem verfügbaren Platz bis zur Grenze.</p>
</div>

Unterstützte Klassen

Diese Tabellen werden direkt aus den vorhandenen Utility-Regeln erzeugt. Sie zeigen Basisklassen; responsive und Zustandsvarianten sind unter Responsive Layouts & Zustände erklärt.

Breite und Höhe

Numerische Werte sind Dichte-abhängig; full, screen und Brüche sind relative Größen.

Breite und Höhe: Klassen und erzeugtes CSS
Klasse	CSS
`w-0`	`width:0`
`h-0`	`height:0`
`w-1`	`width:calc(0.25rem * var(--r-density))`
`h-1`	`height:calc(0.25rem * var(--r-density))`
`w-2`	`width:calc(0.5rem * var(--r-density))`
`h-2`	`height:calc(0.5rem * var(--r-density))`
`w-3`	`width:calc(0.75rem * var(--r-density))`
`h-3`	`height:calc(0.75rem * var(--r-density))`
`w-4`	`width:calc(1rem * var(--r-density))`
`h-4`	`height:calc(1rem * var(--r-density))`
`w-5`	`width:calc(1.25rem * var(--r-density))`
`h-5`	`height:calc(1.25rem * var(--r-density))`
`w-6`	`width:calc(1.5rem * var(--r-density))`
`h-6`	`height:calc(1.5rem * var(--r-density))`
`w-8`	`width:calc(2rem * var(--r-density))`
`h-8`	`height:calc(2rem * var(--r-density))`
`w-10`	`width:calc(2.5rem * var(--r-density))`
`h-10`	`height:calc(2.5rem * var(--r-density))`
`w-12`	`width:calc(3rem * var(--r-density))`
`h-12`	`height:calc(3rem * var(--r-density))`
`w-16`	`width:calc(4rem * var(--r-density))`
`h-16`	`height:calc(4rem * var(--r-density))`
`w-20`	`width:calc(5rem * var(--r-density))`
`h-20`	`height:calc(5rem * var(--r-density))`
`w-24`	`width:calc(6rem * var(--r-density))`
`h-24`	`height:calc(6rem * var(--r-density))`
`w-32`	`width:calc(8rem * var(--r-density))`
`h-32`	`height:calc(8rem * var(--r-density))`
`w-40`	`width:calc(10rem * var(--r-density))`
`h-40`	`height:calc(10rem * var(--r-density))`
`w-48`	`width:calc(12rem * var(--r-density))`
`h-48`	`height:calc(12rem * var(--r-density))`
`w-64`	`width:calc(16rem * var(--r-density))`
`h-64`	`height:calc(16rem * var(--r-density))`
`w-full`	`width:100%`
`h-full`	`height:100%`
`w-screen`	`width:100vw`
`w-auto`	`width:auto`
`h-auto`	`height:auto`
`w-1/2`	`width:50%`
`w-1/3`	`width:33.333333333333336%`
`w-2/3`	`width:66.66666666666667%`
`w-1/4`	`width:25%`
`w-3/4`	`width:75%`

44 unterstützte Basisklassen in dieser Gruppe.

Minimale und maximale Abmessungen

Grenzen verhindern unerwünschtes Schrumpfen oder zu breite Inhaltsflächen. min-w-0 ist besonders in Flex-/Grid-Layouts hilfreich.

Minimale und maximale Abmessungen: Klassen und erzeugtes CSS
Klasse	CSS
`min-w-0`	`min-width:0`
`min-h-0`	`min-height:0`
`max-w-0`	`max-width:0`
`max-h-0`	`max-height:0`
`min-w-1`	`min-width:calc(0.25rem * var(--r-density))`
`min-h-1`	`min-height:calc(0.25rem * var(--r-density))`
`max-w-1`	`max-width:calc(0.25rem * var(--r-density))`
`max-h-1`	`max-height:calc(0.25rem * var(--r-density))`
`min-w-2`	`min-width:calc(0.5rem * var(--r-density))`
`min-h-2`	`min-height:calc(0.5rem * var(--r-density))`
`max-w-2`	`max-width:calc(0.5rem * var(--r-density))`
`max-h-2`	`max-height:calc(0.5rem * var(--r-density))`
`min-w-3`	`min-width:calc(0.75rem * var(--r-density))`
`min-h-3`	`min-height:calc(0.75rem * var(--r-density))`
`max-w-3`	`max-width:calc(0.75rem * var(--r-density))`
`max-h-3`	`max-height:calc(0.75rem * var(--r-density))`
`min-w-4`	`min-width:calc(1rem * var(--r-density))`
`min-h-4`	`min-height:calc(1rem * var(--r-density))`
`max-w-4`	`max-width:calc(1rem * var(--r-density))`
`max-h-4`	`max-height:calc(1rem * var(--r-density))`
`min-w-5`	`min-width:calc(1.25rem * var(--r-density))`
`min-h-5`	`min-height:calc(1.25rem * var(--r-density))`
`max-w-5`	`max-width:calc(1.25rem * var(--r-density))`
`max-h-5`	`max-height:calc(1.25rem * var(--r-density))`
`min-w-6`	`min-width:calc(1.5rem * var(--r-density))`
`min-h-6`	`min-height:calc(1.5rem * var(--r-density))`
`max-w-6`	`max-width:calc(1.5rem * var(--r-density))`
`max-h-6`	`max-height:calc(1.5rem * var(--r-density))`
`min-w-8`	`min-width:calc(2rem * var(--r-density))`
`min-h-8`	`min-height:calc(2rem * var(--r-density))`
`max-w-8`	`max-width:calc(2rem * var(--r-density))`
`max-h-8`	`max-height:calc(2rem * var(--r-density))`
`min-w-10`	`min-width:calc(2.5rem * var(--r-density))`
`min-h-10`	`min-height:calc(2.5rem * var(--r-density))`
`max-w-10`	`max-width:calc(2.5rem * var(--r-density))`
`max-h-10`	`max-height:calc(2.5rem * var(--r-density))`
`min-w-12`	`min-width:calc(3rem * var(--r-density))`
`min-h-12`	`min-height:calc(3rem * var(--r-density))`
`max-w-12`	`max-width:calc(3rem * var(--r-density))`
`max-h-12`	`max-height:calc(3rem * var(--r-density))`
`min-w-16`	`min-width:calc(4rem * var(--r-density))`
`min-h-16`	`min-height:calc(4rem * var(--r-density))`
`max-w-16`	`max-width:calc(4rem * var(--r-density))`
`max-h-16`	`max-height:calc(4rem * var(--r-density))`
`min-w-20`	`min-width:calc(5rem * var(--r-density))`
`min-h-20`	`min-height:calc(5rem * var(--r-density))`
`max-w-20`	`max-width:calc(5rem * var(--r-density))`
`max-h-20`	`max-height:calc(5rem * var(--r-density))`
`min-w-24`	`min-width:calc(6rem * var(--r-density))`
`min-h-24`	`min-height:calc(6rem * var(--r-density))`
`max-w-24`	`max-width:calc(6rem * var(--r-density))`
`max-h-24`	`max-height:calc(6rem * var(--r-density))`
`min-w-32`	`min-width:calc(8rem * var(--r-density))`
`min-h-32`	`min-height:calc(8rem * var(--r-density))`
`max-w-32`	`max-width:calc(8rem * var(--r-density))`
`max-h-32`	`max-height:calc(8rem * var(--r-density))`
`min-w-40`	`min-width:calc(10rem * var(--r-density))`
`min-h-40`	`min-height:calc(10rem * var(--r-density))`
`max-w-40`	`max-width:calc(10rem * var(--r-density))`
`max-h-40`	`max-height:calc(10rem * var(--r-density))`
`min-w-48`	`min-width:calc(12rem * var(--r-density))`
`min-h-48`	`min-height:calc(12rem * var(--r-density))`
`max-w-48`	`max-width:calc(12rem * var(--r-density))`
`max-h-48`	`max-height:calc(12rem * var(--r-density))`
`min-w-64`	`min-width:calc(16rem * var(--r-density))`
`min-h-64`	`min-height:calc(16rem * var(--r-density))`
`max-w-64`	`max-width:calc(16rem * var(--r-density))`
`max-h-64`	`max-height:calc(16rem * var(--r-density))`
`min-h-screen`	`min-height:100vh`
`max-w-sm`	`max-width:24rem`
`max-w-md`	`max-width:32rem`
`max-w-lg`	`max-width:48rem`
`max-w-xl`	`max-width:64rem`
`max-w-full`	`max-width:100%`
`max-w-none`	`max-width:none`

75 unterstützte Basisklassen in dieser Gruppe.

Seitenverhältnis

Ein Seitenverhältnis hält Flächen bei wechselnden Breiten proportional.

Seitenverhältnis: Klassen und erzeugtes CSS
Klasse	CSS
`aspect-square`	`aspect-ratio:1`
`aspect-video`	`aspect-ratio:16/9`

2 unterstützte Basisklassen in dieser Gruppe.

Individuell kombinieren

Klassen lassen sich mit Komponenten, eigenen CSS-Regeln und den gemeinsamen --r-*-Variablen kombinieren. Dichte und Schriftgröße bleiben unabhängig. Die Syntax frei formulierter Klassen wie p-[13px] ist noch nicht implementiert.

Zur durchsuchbaren Gesamtübersicht · Farben und eigene Variablen