Zum Hauptinhalt springen
Version: 2.1.1
Figma

Layout

Info

Code-Beispiele für Entwickler:innen sind in der Komponenten Dokumentation vom Grid zu finden.

Ein konsistentes, flexibles Layout ist die Grundlage jedes digitalen Produkts. Unser Layout-Grid bildet den strukturellen Rahmen für sämtliche Inhalte im Interface – von einfachen Textblöcken bis hin zu komplexen Modulen.

Das Grid basiert auf einem 12-Spalten-System, das mithilfe von Containern, Zeilen (Rows) und Spalten (Columns) arbeitet. Es organisiert Inhalte modular, skalierbar und responsiv – unabhängig von Gerät oder Auflösung.

Das Grid erfüllt dabei mehrere Funktionen:

  • Es sorgt für visuelle Ordnung und strukturiert Inhalte entlang einer einheitlichen Linie.
  • Es ermöglicht wiederverwendbare Layoutmuster, die sich konsistent über Komponenten und Seiten hinweg einsetzen lassen.
  • Es unterstützt ein responsives Verhalten durch fluides oder fixes Layout – je nach Viewportgröße.
  • Es definiert feste Abstände (Gutters) zwischen Spalten sowie maximale Containerbreiten, um die Lesbarkeit auf großen Bildschirmen zu gewährleisten.

Grid Struktur​

Das Layout-Grid orientiert sich am klassischen Aufbau aus:

  • Container: Definiert die äußere Begrenzung des Layouts und zentriert den Inhalt. Container sorgen dafür, dass Inhalte innerhalb einer festen Breite gehalten werden – abhängig vom Breakpoint.
  • Zeilen: Gruppieren Spalten horizontal.
  • Spalten: Tragen die Inhalte und lassen sich in ihrer Breite flexibel steuern.
  • Gutter: Der Abstand zwischen Spalten wird durch das horizontale Padding der Spaltenelemente erzeugt. Dieser Abstand wird als Gutter bezeichnet. Die Gutter in unserem Layout-Grid haben über alle Breakpoints hinweg eine fixe Größe. Sie sorgen für saubere visuelle Trennung und verbessern die Lesbarkeit, vor allem bei komplexeren Layouts.

Grid Struktur

Fluid vs. Fixe Layouts​

Je nach Anwendungsfall kommen zwei Varianten von Containern zum Einsatz:

  • Fixe Container: Verwenden definierte Maximalbreiten, die sich an den Breakpoints orientieren. Sie eignen sich für Inhaltsbereiche, in denen eine kontrollierte Breite (z. B. für Lesbarkeit) gewünscht ist.
  • Fluide Container: Strecken sich über die gesamte Breite des Viewports und passen sich dynamisch an. Ideal für Header, Footer oder medienlastige Bereiche.

Fluide und Fixe Layouts

Breakpoints​

Das Grid folgt dem Mobile-First-Prinzip – Layouts werden von kleinen zu großen Viewports gedacht. An definierten Schwellen (Breakpoints) kann sich das Verhalten des Grids ändern.

  • --kern-col-xs-* für kleinere Bildschirme (bis 576px),
  • --kern-col-sm-* für mittlere Bildschirme (ab 576px),
  • --kern-col-md-* für Tablets und mittlere Geräte (ab 768px),
  • --kern-col-lg-* für größere Geräte (ab 992px),
  • --kern-col-xl-* für noch größere Bildschirme (ab 1200px),
  • --kern-col-xxl-* für sehr große Bildschirme (ab 1600px).

Layoutaufteilungen​

Das Grid-System ermöglicht eine Vielzahl von Layout-Varianten – von einfachen einspaltigen Layouts bis hin zu komplexen mehrspaltigen Strukturen. Durch die 12-Spalten-Basis lassen sich unterschiedlichste Aufteilungen flexibel umsetzen, zum Beispiel:

gleichmäßige Spaltenlayouts​

Gleichmäßige Spaltenlayouts

asymmetrische Aufteilungen​

Asymmetrische Spaltenlayouts

einspaltige Layouts​

Einspaltige Layouts

Wichtig dabei: Gerade auf größeren Screens können einspaltige Layouts schnell zu breiten Textblöcken führen. Achte deshalb bei textlastigen Inhalten darauf, dass die Zeilenlänge im angenehmen Bereich bleibt (ideal: ca. 60–80 Zeichen pro Zeile). Dieser Aspekt sollte über alle Breakpoints hinweg berücksichtigt werden, um eine gute Lesbarkeit sicherzustellen. Das Grid und die Möglichkeit, mit Offsets schmalere Spalten zu erzeugen, hilft dir dabei, durch gezielte Spaltenbreiten und Abstände klare Lesestrukturen zu schaffen – unabhängig vom Endgerät.

Inhaltsverzeichnis