Karten-Layouts praktisch gestalten

Wie man modulare Kartensysteme entwirft, die flexibel und zugänglich sind. Mit echten Beispielen aus modernen Websites.

9 min Lesezeit Mittelstufe März 2026

Tablet-Bildschirm zeigt verschiedene Kartenlayouts und modulare Designelemente in einer responsiven Anordnung

Was macht ein gutes Kartenlayout aus?

Karten sind überall. Pinterest, Airbnb, Dribbble – überall nutzen Designer Kartensysteme um Inhalte zu präsentieren. Aber es’s nicht einfach, sie richtig zu machen. Eine gute Kartenstruktur muss mehrere Anforderungen erfüllen: Sie muss auf verschiedenen Bildschirmgrößen funktionieren, die Lesbarkeit bewahren und gleichzeitig eine visuelle Hierarchie schaffen.

In diesem Artikel schauen wir uns an, wie Karten-Layouts funktionieren, welche Regeln es gibt und wie du sie praktisch umsetzt. Wir arbeiten mit echten Beispielen und konkreten Techniken, die du sofort anwenden kannst.

Designer arbeitet an Kartenlayout auf Grafikbildschirm mit Raster und Richtlinien im Hintergrund

Das Zwölf-Spalten-System als Basis

Das Zwölf-Spalten-Raster ist das Fundament. Es gibt dir eine stabile Struktur, auf der du Karten platzieren kannst. Warum zwölf Spalten? Weil sich zwölf perfekt in verschiedene Kombinationen aufteilen lässt: 12 Spalten (1 Karte), 6 Spalten (2 Karten), 4 Spalten (3 Karten), 3 Spalten (4 Karten).

Auf mobilen Geräten reduzierst du das auf 4 Spalten. Auf Tablets nutzt du 8 Spalten. Desktop bleibt bei 12. So bekommt jede Bildschirmgröße genau die richtige Anzahl Karten nebeneinander. Das Geheimnis ist nicht, alle Geräte gleich zu behandeln – sondern das System intelligent anzupassen.

Abstände, die den Unterschied machen

Der Abstand zwischen Karten ist nicht optional. Er’s entscheidend für die Lesbarkeit. Zu kleine Abstände? Die Karten wirken gequetscht. Zu große Abstände? Das Design sieht fragmentiert aus.

Professionelle Designs verwenden einen konsistenten Abstand – meist zwischen 16px und 32px, je nach Größe der Karten. Dieser Abstand wiederholt sich auf allen Seiten jeder Karte. So entsteht visueller Rhythmus. Ein weiterer Trick: Verwende Verhältnisse statt einzelner Pixel. Wenn der Abstand zwischen Karten 24px ist, sollte der innere Padding einer Karte 16px sein. Die Mathematik dahinter schafft Harmonie.

Nahaufnahme eines Kartenlayouts zeigt verschiedene Abstände und Padding-Regeln zwischen Elementen

Verschiedene Kartenvariationen zeigen unterschiedliche Inhaltstypen und visuelle Hierarchien

Die innere Struktur einer Karte

Eine Karte ist nicht einfach ein Container. Sie hat eine innere Hierarchie. Oben sitzt das Bild – das zieht Aufmerksamkeit. Dann kommt der Titel, kurz und prägnant. Darunter eine Beschreibung in kleinerer Schrift. Und manchmal ein Button oder ein Call-to-Action.

Aber nicht alle Karten sind gleich. Eine Produktkarte sieht anders aus als eine Artikel-Karte oder eine Team-Member-Karte. Das ist okay. Der Unterschied sollte aber absichtlich sein – nicht zufällig. Wenn dein Design ein Muster hat, bleib dabei. Nutzer erkennen Muster und verstehen schneller, was sie tun müssen.

Responsive Karten: Breakpoints intelligent setzen

Mobile Nutzer sehen eine Karte pro Zeile. Das ist Standard. Bei 768px Breite? Zwei Karten nebeneinander. Bei 1024px? Drei oder vier. Aber hier kommt der wichtige Part: Nicht alle Inhalte funktionieren in allen Breiten gleich gut.

Pro-Tipp: Teste dein Layout bei realen Geräten, nicht nur im Browser. Ein iPhone SE (375px) fühlt sich anders an als ein iPad (768px). Und ein Desktop-Monitor (1440px) ist eine ganz andere Welt. Die Breakpoints sollten dem Inhalt folgen, nicht umgekehrt.

Manche Designer verwenden Container Queries statt Media Queries. Das ist modern und bietet mehr Flexibilität. Statt „bei dieser Bildschirmbreite” fragst du „wie viel Platz hat dieser Container?” Das funktioniert besser für Komponenten, die an verschiedenen Stellen der Seite unterschiedlich viel Platz haben.

Responsive Kartenlayout zeigt die gleichen Karten auf drei verschiedenen Bildschirmgrößen: Mobiltelefon, Tablet und Desktop

Praktische Checkliste für dein Kartenlayout

Raster definieren

Entscheide dich für 12 Spalten auf Desktop, 8 auf Tablet, 4 auf Mobiltelefon. Das ist nicht in Stein gemeißelt, aber es’s ein solider Standard.

Abstand konsistent halten

Zwischen Karten: 24px. Inneres Padding: 16px. Diese Zahlen können variieren, aber sie sollten sich wiederholen.

Höhe kontrollieren

Wenn Karten unterschiedliche Inhaltsmengen haben, sehen sie ungleichmäßig aus. Nutze CSS Klassen oder Flexbox, um Höhen zu vereinheitlichen.

Bilder richtig skalieren

Nutze aspect-ratio oder object-fit: cover. So sehen Bilder auf allen Karten gleich aus, egal welche Größe das Original hat.

Hover-Effekte subtil halten

Eine Skalierung oder ein Schatten ist genug. Zu viel Animation wirkt unprofessionell. Nutze transition: all 0.3s ease;

Zugänglichkeit nicht vergessen

Alt-Text auf Bildern. Ausreichender Farbkontrast. Karten sollten mit Tastatur navigierbar sein.

Die Kunst liegt in der Konsistenz

Karten-Layouts sehen einfach aus, aber dahinter steckt viel Überlegung. Es geht nicht darum, die perfekte Vorlage zu finden. Es geht darum, Regeln zu setzen und sie konsequent anzuwenden. Ein durchdachtes Raster, konsistente Abstände, klare Hierarchie – das sind die Bausteine.

Der beste Teil? Wenn du diese Grundlagen verstanden hast, kannst du sie auf jeden neuen Inhalt anwenden. Egal ob Produkte, Artikel, Team-Member oder Projekte – die Logik bleibt gleich. Das macht dein Design nicht nur schöner, sondern auch wartbarer und skalierbarer.

Tiefer einsteigen?

Lerne wie das Zwölf-Spalten-Raster wirklich funktioniert und entdecke Masonry-Galerien, die fesseln.

Zum Raster-Guide

Hinweis zur Nutzung

Dieser Artikel enthält Richtlinien und Best Practices für das Design von Kartenlayouts. Die beschriebenen Techniken basieren auf aktuellen Web-Standards und bewährten Design-Praktiken. Jedes Projekt ist unterschiedlich – die hier gezeigten Abstände, Spalten und Verhältnisse sind Empfehlungen, keine strikten Regeln. Teste dein Design mit echten Inhalten und realen Nutzern, um die beste Lösung für dein spezifisches Anliegen zu finden. Webstandards und Best Practices entwickeln sich ständig weiter; überprüfe daher die neuesten Ressourcen und Richtlinien.