# Spalten mit Verstand: Wann zwei, wann drei?

> Der columns-Block kann zwei bis fünf Spalten. Wann welche Zahl sinnvoll ist, wo der Umbruch liegt und die eine Falle, bei der der Block stillschweigend verschwindet.

Kanonische URL: https://cmf.brosemedien.de/news/spalten-mit-verstand

---

# Spalten mit Verstand: Wann zwei, wann drei – und was auf dem Handy passiert

Nebeneinander ist schnell gebaut und selten durchdacht. Der `columns`-Block nimmt zwei bis fünf Spalten – die Frage ist nicht, was geht, sondern was bei 390 Pixeln Breite davon übrig bleibt.

## Welche Spaltenzahl wofür

**Zwei Spalten** sind der Normalfall für Gegenüberstellungen: Text und Bild, Vorher und Nachher, zwei Wege zur Auswahl. Sie funktionieren auch auf schmalen Laptops noch.

**Drei Spalten** sind die Obergrenze für Inhalte mit Fließtext. Darunter wird jede Spalte so schmal, dass Wörter umbrechen statt Zeilen. Für Karten mit Bild, Überschrift und zwei Sätzen sind sie ideal.

**Vier und fünf Spalten** gehören zu kurzen Inhalten – Zahlen, Symbole, einzelne Begriffe. Sobald ein ganzer Satz hineinsoll, sind es zu viele.

## Wo der Umbruch liegt

Du musst dafür nichts einstellen, aber du solltest es wissen: Vier- und fünfspaltige Raster fallen bereits bei **980 Pixeln** auf zwei Spalten zurück. Alles – auch zwei- und dreispaltig – wird bei **720 Pixeln** einspaltig. Zwischen diesen beiden Grenzen steht ein dreispaltiges Raster also noch dreispaltig, mit entsprechend schmalen Spalten. Genau dort lohnt sich ein Blick, bevor du veröffentlichst: Ein Button, dessen Beschriftung eine lange Domain enthält, bricht dann mitten im Wort um.

## Die Falle: der Block, der stillschweigend verschwindet

Im JSON steht neben `columns` ein Feld `items` – ein Array pro Spalte. **Beide Zahlen müssen übereinstimmen.** Wer `columns: 3` schreibt, aber nur zwei Einträge in `items` hat, bekommt keine Fehlermeldung im Frontend, sondern nichts: Der Block rendert eine leere Zeichenkette und ist einfach weg. Wer über die API arbeitet, prüft das am besten vor dem Zurückschreiben – die Validierung meldet es, das stille Verschwinden passiert nur beim Rendern.

Zweite Eigenheit derselben Struktur: Die Spalten werden *spaltenweise* gefüllt, nicht zeilenweise. Bei fünf Karten auf drei Spalten steht in Spalte 1 die erste und die vierte Karte. Wenn dir die Reihenfolge wichtig ist – etwa weil sie auf dem Handy untereinander erscheint – verteilst du entsprechend.

Alle Varianten von zwei bis fünf Spalten – auch verschachtelt – zeigt die [Spalten-Demo](/spalten) live. Alle Bausteine im Überblick gibt es im Beitrag [9 Blocktypen, unendliche Möglichkeiten](/news/8-blocktypen).