Weitere Layout-Werkzeuge

Seitenverhältnis erzwingen: `aspect-ratio`

Früher brauchte man Tricks mit padding-top in Prozent, um ein Element in einem festen Seitenverhältnis zu halten - z.B. für ein Video oder eine Bild-Vorschau. Heute reicht eine Zeile:

.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.avatar {
  aspect-ratio: 1; /* = 1 / 1, also quadratisch */
  width: 80px;
}

Fließende Größen: `clamp()`

clamp() gibt einen Wert vor, der zwischen einem Minimum und einem Maximum fließend mitwächst - praktisch für Schriftgrößen, die sich an die Bildschirmbreite anpassen sollen, ohne dafür extra Media Queries zu brauchen:

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

clamp(MIN, BEVORZUGT, MAX) bedeutet:

Nie kleiner als 1.5rem
Nie größer als 3rem
Dazwischen: 4vw - wächst mit der Fensterbreite mit

.container {
  width: clamp(300px, 90%, 1200px); /* nie schmäler als 300px, nie breiter als 1200px */
}

Praxisbeispiel: eine fließend skalierende Card

.card {
  width: clamp(240px, 30vw, 360px);
  padding: clamp(12px, 2vw, 24px);
}

.card h2 {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

⚠️ clamp() ersetzt Media Queries nicht komplett - für strukturelle Änderungen (z.B. von einer Spalte auf zwei Spalten wechseln) braucht ihr weiterhin @media. Für fließende Größenanpassungen innerhalb einer Struktur ist clamp() aber oft die elegantere, kürzere Lösung.

Scroll-Verhalten kontrollieren: `scroll-snap`

Für horizontale “Swipe”-Galerien, die beim Scrollen sauber an jedem Element einrasten, ganz ohne JavaScript:

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
}

.gallery img {
  scroll-snap-align: start;
  flex: 0 0 80%;
}