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.

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.

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.

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.

Ein fertiges Beispiel mit fünf Einträgen auf drei Spalten steht auf der Demos-Seite ganz unten. Alle Bausteine im Überblick gibt es im Beitrag 9 Blocktypen, unendliche Möglichkeiten.