Empfohlene Pläne richtig hervorheben
So funktioniert visuelle Hierarchie: Welche Farben, Größen und Abstände machen deine beste Option wirklich zur ersten Wahl?
Artikel lesenTarif-Spalten strukturieren: Das richtige Grid
3, 4 oder 5 Spalten? Wir erklären, wie du die richtige Struktur wählst und sie sauber mit CSS aufbaust — ohne komplexe Grids.
Warum die richtige Spaltenanzahl entscheidend ist
Bei Preistabellen geht es nicht nur um Layout. Es’s daher entscheidend, die passende Spaltenstruktur zu wählen. Die meisten Designer orientieren sich an Gefühl — und landen dann bei einer Lösung, die zwar aussieht wie eine Preistabelle, aber auf dem Handy zusammenbricht oder am Desktop zu breit wird.
Hier kommt die Realität: Es gibt keine magische Anzahl. Stattdessen gibt’s bewährte Regeln, die dir helfen, schnell die richtige Entscheidung zu treffen. Wir zeigen dir, wie du mit Flexbox eine stabile, responsive Struktur aufbaust — und warum du dabei nicht zu CSS Grid greifen musst.
Die drei häufigsten Strukturen erklärt
Beginnen wir mit den Klassikern. Diese drei Strukturen decken etwa 95 Prozent aller realen Preistabellen ab:
01
Die 3-Spalten-Struktur
Basic, Standard, Premium. Das ist die klassische SaaS-Struktur. Du brauchst hier mindestens 280 Pixel pro Spalte — sonst werden die Texte zu klein. Mit drei Spalten plus Abstände (Gap von etwa 24 Pixeln) kommst du auf knapp 900 Pixel Mindestbreite. Das funktioniert auf Tablets noch gut.
Die 3er-Struktur eignet sich perfekt, wenn du einen klaren Favoriten hast. Die mittlere Spalte kann durch leichte Vergrößerung oder einen Unterschied in der Hintergrundfarbe hervorgehoben werden.
02
Die 4-Spalten-Struktur
Starter, Professional, Business, Enterprise. Diese Struktur bietet dir mehr Flexibilität und sieht auf großen Bildschirmen beeindruckend aus. Das Problem: Bei vier Spalten à 250 Pixel brauchst du etwa 1.100 Pixel nur für die Inhalte. Das ist auf 1024er Tablets schon eng.
Die 4er-Variante funktioniert am besten für B2B-Produkte, die größere Monitore voraussetzen. Am Handy wirst du hier auf jeden Fall stapeln müssen — es’s keine elegante Lösung auf mobil.
03
Die 5+-Spalten-Struktur
Enterprise-Features, Vergleichstabellen mit vielen Parametern. Fünf oder mehr Spalten brauchst du selten für Preispläne. Häufiger kommt das bei Feature-Vergleichstabellen vor. Hier solltest du ernsthaft überlegen, ob die Tabelle horizontal scrollbar sein darf.
Mit fünf Spalten à 200 Pixel kommst du auf 1.000+ Pixel. Das bedeutet: Deine Besucher müssen scrollen. Das ist nicht ideal, aber manchmal unvermeidlich.
So baust du es mit Flexbox auf
Das Wichtigste zuerst: Du brauchst kein CSS Grid. Flexbox mit `flex-wrap: wrap` macht genau das, was du brauchst — und es’s deutlich einfacher zu verstehen.
Die Basis sieht so aus: Ein Container mit `display: flex`, `flex-wrap: wrap` und `gap`. Dann definierst du auf jeder Spalte ein `flex: 1 1 auto` und eine feste `min-width`. Das ist alles. Hier’s der Trick: Die `min-width` bestimmt, wie viele Spalten auf einer Zeile Platz haben. Setzt du `min-width: 280px`, passen auf einem 900-Pixel-breiten Viewport maximal drei Spalten nebeneinander.
Responsive wird es durch Media Queries. Bei 768px Bildschirmbreite reduzierst du die `min-width` auf 200px oder noch kleiner — oder du wechselst ganz zu einer Single-Column-Layout mit `flex-basis: 100%`.
Responsive Anpassungen: Die Breakpoint-Strategie
Hier kommt der entscheidende Part. Auf dem Desktop zeigst du deine 3, 4 oder 5 Spalten. Aber was passiert ab 768px? Und was ab 480px?
Die meisten Designer machen einen Fehler: Sie stapeln alle Spalten zu einer einzigen Kolonne. Das funktioniert, sieht aber nach “mobile Website” aus. Besser ist ein zweistufiges System:
- Desktop (1024px+): Volle Spaltenanzahl (3, 4, 5…)
- Tablet (768px–1023px): Reduzierte Spalten (z.B. von 4 auf 2) oder größere min-width
- Mobile (<768px): Einzelne Spalte mit voller Breite
Das erfordert nur drei Media Queries. Nicht mehr. Die min-width-Regel erledigt den Rest — deine Spalten passen sich automatisch an.
Pro-Tipp: Die empfohlene Spalte richtig herausheben
Du hast einen Lieblings-Tarif? Das muss visuell klar werden. Die beste Methode: Gib dieser Spalte einen leicht anderen Hintergrund (nicht zu kontrastreich) und erhöhe die `transform: scale(1.05)` um 5 Prozent. Das wirkt größer, ohne aufdringlich zu sein. Kombiniert mit einem subtilen Box-Shadow wird diese Spalte zum Eyecatcher.
Wichtig: Verwende keine übersteigerten Farben. Ein Unterschied von etwa 5–10 Prozent in der Helligkeit reicht völlig aus. Deine Besucher werden es unbewusst registrieren.
Deine Entscheidungshilfe: Welche Struktur passt zu dir?
Die Wahl der richtigen Spaltenanzahl ist weniger eine Designfrage als eine strategische. Hier’s eine schnelle Entscheidungshilfe:
Wähle 3 Spalten, wenn:
- Du einen klaren Premium-Plan hast
- Deine Zielgruppe viel auf Tablets browsed
- Die Spalten lesbar sein müssen
Wähle 4 Spalten, wenn:
- Du B2B-Zielgruppe mit großen Monitoren hast
- Vier verschiedene Kundensegmente abdeckst
- Mobile Nutzung unter 30 Prozent liegt
Das Wichtigste: Lass dich von Komplexität nicht abschrecken. Mit Flexbox, ein paar Media Queries und klaren Regeln für min-width und gap baust du eine Struktur auf, die auf jedem Device aussieht, als wäre sie speziell dafür designt worden. Das ist nicht Magie — es’s gutes Handwerk.
Hinweis zur Nutzung
Die Techniken und Empfehlungen in diesem Artikel basieren auf Best Practices für responsive Webdesign. Sie sind als Orientierungshilfen zu verstehen und ersetzen nicht die Evaluation für dein spezifisches Projekt. Jede Website hat unterschiedliche Anforderungen — teste deine Struktur gründlich auf verschiedenen Geräten und Bildschirmgrößen, bevor du sie live nimmst. Die Wahl der Spaltenanzahl hängt auch von deiner konkreten Content-Menge und deinem Geschäftsmodell ab.
Verwandte Artikel
