Grid, Flexbox & Subgrid visuell erklärt
Gute Layouts sind klar, responsiv und leicht wartbar. Dieser Guide zeigt dir, wann du welche CSS-Technik nutzt, welche Viewport-Größen typisch sind und wie du Designs für Desktop, Tablet und Smartphone bewertest.
Typische Gerätebreiten in CSS-Pixeln
Für Webdesign sind meist CSS-Pixel wichtiger als echte Display-Pixel. Ein Smartphone kann technisch über 1000 physische Pixel breit sein, wird im Browser aber oft als ungefähr 360 bis 430 CSS-Pixel dargestellt.
CSS-px Breite, häufig bei älteren oder sehr kompakten Geräten.
Sehr häufige Planungsgröße für moderne mobile Layouts.
Oft genug Platz für 2 Spalten, aber Touch-Bedienung bleibt wichtig.
Mehr Raum für Navigation, Sidebars, große Bilder und komplexe Raster.
Durchschnittliche Layoutgrößen
Die Werte sind Orientierungspunkte. Besser ist: Mobile-first starten, dann Breakpoints setzen, sobald Inhalt zu eng wird oder zu viel Leerraum entsteht.
| Gerät | Typische Breite | Typische Höhe | Gute Layout-Idee | Worauf achten? |
|---|---|---|---|---|
| Smartphone klein | 320–375 px | 568–812 px | 1 Spalte, kurze Texte, große Touch-Ziele | Keine horizontalen Scrollbereiche, keine zu kleinen Buttons. |
| Smartphone normal/groß | 390–430 px | 800–932 px | 1 Spalte, Cards untereinander, Sticky CTA möglich | Abstände nicht zu groß, sonst wirkt die Seite leer und lang. |
| Tablet Portrait | 768–834 px | 1024–1194 px | 2 Spalten, größere Cards, klare Abschnitte | Nicht einfach Desktop verkleinern; Touch-Flächen bleiben groß. |
| Tablet Landscape | 1024–1194 px | 768–834 px | 2–3 Spalten, optional Sidebar | Zeilenlängen begrenzen, damit Text lesbar bleibt. |
| Laptop | 1280–1440 px | 720–900 px | 3 Spalten, Hero + Cards, Navigation sichtbar | Maximale Inhaltsbreite setzen, sonst werden Texte zu breit. |
| Desktop groß | 1536–1920+ px | 900–1080+ px | Großzügiges Raster, Sidebars, visuelle Hierarchie | Nicht alles über die ganze Breite strecken; Container nutzen. |
Welche Technik passt zu welchem Format?
Alle drei Techniken können responsiv sein. Entscheidend ist, ob du eine Achse, zwei Achsen oder verschachtelte Ausrichtung lösen möchtest.
Ideal für lineare Inhalte
Flexbox organisiert Elemente entlang einer Hauptachse. Perfekt, wenn Inhalte flexibel wachsen, umbrechen oder gleichmäßig verteilt werden sollen.
Ideal für Seitenraster
Grid steuert Zeilen und Spalten gleichzeitig. Stark für Header, Sidebar, Content, Dashboards und Card-Übersichten.
Ideal für konsistente Details
Subgrid lässt verschachtelte Elemente das Raster des Elternbereichs übernehmen. So bleiben Titel, Texte und Buttons sauber ausgerichtet.
Layout-Generator
Stelle Breite, Layout-Methode, Spalten und Abstand ein. Die Bewertung darunter zeigt, wie gut die gewählte Kombination für Desktop, Tablet und Smartphone geeignet ist.
Schlechtes vs. gutes Webdesign
Kleine Webseitenbilder zeigen typische Fehler und bessere Alternativen. Achte besonders auf Hierarchie, Abstand, Lesbarkeit und mobile Nutzung.
- Zu viele Spalten auf kleinen Geräten.
- Keine klare visuelle Reihenfolge.
- Zu kleine Schrift und zu wenig Weißraum.
- Klare Hierarchie mit starkem Hauptbereich.
- Gute Abstände und ruhige Flächen.
- Layout kann auf Mobile einfach einspaltig werden.
Professionelle Regeln für responsive Layouts
Diese Regeln helfen dir, Layouts zu bauen, die nicht nur funktionieren, sondern hochwertig wirken.
Gute Praxis
- Plane zuerst den Inhalt, dann das Raster.
- Nutze max-width, damit Texte auf Desktop nicht zu breit werden.
- Arbeite mit einem Abstandssystem, z. B. 8, 16, 24, 32, 48 px.
- Buttons sollten auf Touch-Geräten mindestens ca. 44 px hoch sein.
- Nutze clamp() für flexible Schriftgrößen.
- Prüfe echte Zwischenbreiten, nicht nur iPhone und Desktop.
Typische Fehler
- Desktop-Layout einfach auf Mobile zusammenquetschen.
- Zu viele Breakpoints statt flexibler Komponenten.
- Zu kleine Schrift, zu kleine Klickflächen und zu wenig Kontrast.
- Feste Pixelbreiten für große Container.
- Horizontales Scrollen durch zu breite Bilder oder Tabellen.
- Jede Card unterschiedlich ausrichten, obwohl Subgrid helfen könnte.
Merksatz
Nutze Flexbox für kleine Komponenten, Grid für die Seitenstruktur und Subgrid für präzise Ausrichtung in verschachtelten Cards. Setze Breakpoints dort, wo dein Inhalt sie braucht — nicht nur, weil ein bestimmtes Gerät existiert.