Intrinsisches Design: inhaltsgesteuerte Größen

Intrinsisches Design, ein von Jen Simmons geprägter Begriff, bedeutet, dass der Inhalt seine eigene Größe bestimmt, statt dass ihm explizite Pixelmaße vorgegeben werden. CSS stellt Schlüsselwörter für die intrinsische Größenanpassung bereit, mit denen Layouts ohne durch Breakpoints gesteuerte Überschreibungen auf natürliche Weise responsiv werden.

min-content: die kleinste Größe, in die der Inhalt ohne Überlauf passt (bei Text erfolgt der Umbruch an jeder Wortgrenze). max-content: die Größe, die nötig ist, um den Inhalt einzeilig und ohne Umbruch darzustellen. Beide Werte spiegeln die tatsächlichen Abmessungen des Inhalts wider.

fit-content entspricht min(max-content, max(min-content, available)). Die Größe wächst mit dem Inhalt bis zum verfügbaren Platz und wird danach umgebrochen. Ideal für Buttons und Beschriftungen, die so breit wie ihr Text, aber nicht breiter als ihr Container sein sollen.

minmax(min, max) in grid-template-columns legt die minimale und maximale Größe eines Tracks fest. minmax(200px, 1fr) erstellt eine Spalte, die mindestens 200px breit ist, aber wachsen kann. Zusammen mit auto-fill entstehen so intrinsisch responsive Grids.

Beide füllen die Zeile mit so vielen Tracks wie möglich. auto-fill behält leere Tracks bei (und bewahrt dadurch die Spaltenanzahl). auto-fit blendet leere Tracks aus, sodass sich gefüllte Tracks vergrößern und den verfügbaren Platz ausfüllen. Verwenden Sie auto-fit für inhaltsgesteuerte Layouts, die sich auf die verfügbare Breite ausdehnen sollen.

clamp(min, preferred, max) begrenzt einen Wert auf einen Bereich zwischen den Grenzwerten. font-size: clamp(1rem, 2.5vw, 1.5rem) skaliert abhängig von der Viewportbreite zwischen 1rem und 1.5rem – fließende Typografie ohne Media Queries.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) erstellt ein responsives Grid, das bei sehr schmalen Viewports einspaltig ist und automatisch weitere Spalten hinzufügt, sobald der Platz dafür ausreicht. Keine Media Queries, kein JavaScript.

aspect-ratio: 16/9 sorgt dafür, dass ein Element seine Proportionen beibehält, wenn sich seine Breite ändert. Zusammen mit width: 100% füllt ein Video-Container sein Elternelement aus und behält immer das Seitenverhältnis 16:9 bei – ohne JavaScript oder prozentbasierte Padding-Tricks.

Intrinsisches Design geht Hand in Hand mit logischen CSS-Eigenschaften (inline-size, block-size, margin-inline) für Layouts, die sowohl in horizontalen als auch in vertikalen Schreibrichtungen funktionieren. Die intrinsische Größenanpassung passt sich automatisch an die Schreibrichtung an.

Fest: width: 300px — unabhängig vom Inhalt immer 300px breit. Intrinsisch: width: fit-content — so breit wie der Inhalt, innerhalb der vorgegebenen Grenzen. Feste Layouts benötigen Breakpoints zur Anpassung; intrinsische Layouts passen sich auf Grundlage ihres Inhalts und Kontexts selbst an.

Intrinsisches Design ist besonders leistungsfähig, wenn der Inhalt naturgemäß unterschiedlich groß ist. Eine erzwungene intrinsische Größenanpassung bei bekannten und einheitlichen Inhalten erhöht die Komplexität ohne Nutzen. Verwenden Sie explizite Größen für feststehende UI-Elemente (Navigation, Toolbar) und intrinsische Größenanpassung für Inhaltsbereiche.

Was macht auto-fit in grid-template-columns anders als auto-fill?

Intrinsisches Design nutzt CSS-Schlüsselwörter für die Größenanpassung (min-content, max-content, fit-content), minmax() mit auto-fit, clamp() für fließende Skalierung und aspect-ratio, um Layouts anhand der Inhaltsabmessungen statt anhand von Viewport-Breakpoints zu erstellen. Das Ergebnis sind auf natürliche Weise responsive Layouts mit weniger CSS und weniger Media Queries.