# Demo: Spalten-Layouts im CMF > Zwei bis fünf Spalten im Block-Editor: So baut CMF responsive Mehrspalten-Layouts ohne Page-Builder – mit Umbruchpunkten, Regeln und Markdown-Export. Kanonische URL: https://cmf.brosemedien.de/spalten --- # Spalten & Layout 2 bis 5 Spalten, responsive Umbruchpunkte, verschachtelte Layouts – der `columns`-Block macht es möglich. *Jede Spalte kann beliebige Blöcke enthalten.* Der `columns`-Block ist das Layout-Werkzeug des CMF. Auf kleinen Bildschirmen wandeln sich die Raster automatisch in Einzelspalten um. Diese Seite zeigt alle Varianten live. ## Wie Spalten funktionieren Der `columns`-Block hat zwei Pflichtfelder: `columns` (Anzahl, 2–5) und `items` (Array mit genau so vielen Einträgen wie Spalten). Jeder Eintrag in `items` ist selbst ein Array von Blöcken – der Inhalt der jeweiligen Spalte. ``` { "id": "c1_beispiel", "type": "columns", "data": { "columns": 3, ← Anzahl der Spalten (2–5) "items": [ ← genau 3 Einträge, weil columns: 3 [ ...Blöcke Spalte 1... ], [ ...Blöcke Spalte 2... ], [ ...Blöcke Spalte 3... ] ] } } ``` ### Responsives Verhalten Alle Spalten-Layouts brechen bei Bildschirmbreiten bis **720 px** automatisch um: Dann stehen alle Spalten untereinander. Vier- und fünfspaltige Blöcke zeigen schon bis 980 px Breite nur zwei Spalten je Zeile. Keine Konfiguration nötig – das regelt das mitgelieferte CSS des CMF. .demo-bars{display:flex;gap:6px;margin-bottom:6px}.demo-bars.stacked{flex-direction:column}.demo-bar{flex:1;height:52px;border-radius:6px;background:var(--color-secondary);opacity:.35}.demo-bars.stacked .demo-bar{height:20px;background:var(--color-primary)}Desktop (> 720 px) 3 Spalten nebeneinander Mobil (≤ 720 px) 3 Spalten gestapelt **Wichtige Regel:** Die Anzahl der Einträge in `items` muss exakt mit dem Wert von `columns` übereinstimmen. Über die API führen zu viele oder zu wenige Einträge zu einem Validierungsfehler (HTTP 422, `invalid_page_schema`) – gespeichert wird dann nichts. Der Admin-Bereich prüft beim Speichern im JSON-Modus dagegen nur, ob das JSON gültig ist: Dort wird ein solcher Block gespeichert, auf der Seite aber still ausgeblendet. Jede Spalte kann leer sein (`[]`), muss aber vorhanden sein. ## 2 Spalten – Bild & Text (Produktseite) Das klassischste 2-Spalten-Layout: Bild links, Inhalt rechts. Auf Mobilgeräten erscheint das Bild zuerst, darunter der Text. ![Produktansicht – grüne Textur](/media/2026/03/gruen-0f648f5e.jpg) ### Content Management Frame Beispielinhalt – so sieht eine Produktvorstellung aus. Als Produkt dient hier das CMF selbst. Das CMF ist die komplette Software mit API, Block-System und Admin-Bereich – kostenlos zum Herunterladen. - Dateibasiert – keine Datenbank nötig - JSON-API für Mensch und Maschinen - 9 Blocktypen inklusive - Responsives Spaltenlayout - Medienverwaltung integriert - [Zum Download](/download) - [Dokumentation](/anleitungen) ## 2 Spalten – Textspalten (Editorial) Zwei gleichwertige Textspalten nebeneinander – wie in einer Zeitschrift. Gut für längere Texte, die nicht untereinander, sondern kompakt nebeneinander stehen sollen. ### Inhalte strukturieren Eine klare Inhaltsstruktur ist die Grundlage für langfristig wartbare Webseiten. Wenn jeder Block eine definierte Rolle hat, bleibt das Gesamtbild nachvollziehbar – egal ob ein Mensch oder eine Maschine die Inhalte bearbeitet. Strukturierte Inhalte lassen sich leichter migrieren, übersetzen, zusammenfassen und neu kombinieren. Das ist kein Selbstzweck, sondern ein konkreter Vorteil in der täglichen Arbeit. ### Maschinen lesen mit Wenn Inhalte in definierten Blöcken organisiert sind, kann eine Maschine sie zuverlässig lesen, verändern und erweitern. Es muss nicht raten, was ein Abschnitt bedeutet – der Typ sagt es. Das CMF ist so aufgebaut, dass Maschinen von Anfang an als gleichwertige Nutzer behandelt werden. Die API ist klar, das Schema ist dokumentiert, die Fehler sind sprechend. ## 3 Spalten – Features Drei Inhaltsblöcke nebeneinander – das Standardlayout für Feature-Übersichten auf Landing Pages. Jede Spalte erhält gleiches Gewicht. ### Schnell Kein Datenbankoverhead. Alle Inhalte liegen als JSON-Dateien direkt auf dem Server. ### Offen Die JSON-API lässt sich von jedem HTTP-Client nutzen – vom Browser über Bash-Scripts bis zur Maschine. Kein proprietäres SDK nötig. ### Strukturiert Blockbasierter Aufbau mit klarem Schema. Jeder Block hat einen Typ und ein definiertes `data`-Objekt – keine freien Felder, keine Überraschungen. ## 3 Spalten – Team / Personen Team-Raster mit Bild (oder Avatar), Name, Rolle und kurzer Beschreibung. Auf Mobilgeräten stapeln sich die Personen untereinander. Beispielinhalt – Namen und Rollen sind Platzhalter, die Landschaftsbilder stehen für Porträtfotos. ![Platzhalterbild: Berglandschaft mit Wald](/media/2026/03/berge-ad105964.jpg) ### Person A **Projektleitung** Verantwortet Struktur und Inhalt. Koordiniert die Zusammenarbeit zwischen redaktionellen und technischen Anforderungen. ![Platzhalterbild: einzelner Baum](/media/2026/03/baum-ccef037f.jpg) ### Person B **Entwicklung** Zuständig für API, Blockstruktur und serverseitige Logik. Mag sauberen Code und klare Schnittstellen. ![Platzhalterbild: Hochhäuser einer Großstadt](/media/2026/03/stadt-b4032abb.jpg) ### Person C **Maschinen-Integration** Entwickelt automatisierte Workflows für maschinengestützte Inhaltspflege und API-Anbindungen. ## 3 Spalten – Nummerierte Schritte Ablaufschritte, Anleitungen oder Onboarding-Prozesse lassen sich mit einem `html`-Block als Nummernkreis und einem `text`-Block als Beschreibung pro Spalte gut strukturieren. 1 ### Seiten anlegen Neue Seite über `page_create` anlegen: Titel, Slug, Status, Navigation und den Inhalt (`content`, Pflicht) im ersten Request mitgeben – den endgültigen Slug aus der Antwort übernehmen. 2 ### Inhalte füllen Inhalte per `page_update` ändern – das mitgeschickte `content` ersetzt das ganze Dokument. Medien zuerst hochladen und den `src`-Pfad aus der Upload-Antwort verwenden. 3 ### Veröffentlichen Status auf `"published"` setzen – die Seite ist sofort öffentlich erreichbar. Im Menü erscheint sie nur, wenn die Navigation auf „anzeigen“ steht (`nav.show`, per API standardmäßig an). ## 2 Spalten – Vergleich Zwei Optionen nebeneinander stellen – gut für Preisvergleiche, Vor-/Nachteile oder Alternativen. Auf Mobilgeräten erscheint zuerst die linke, dann die rechte Spalte. ### Klassisches CMS - Datenbank erforderlich - Komplexe Installationsroutine - Plugin-Abhängigkeiten - Regelmäßige Updates nötig - Für Maschinen oft umständlich zu pflegen ### CMF - Keine Datenbank - Hochladen, site.json anpassen, loslegen - Kein Plugin-System - Update im Admin – mit Backup und Rollback - JSON-API für Mensch und Maschinen ## 4 Spalten – Kennzahlen Vier gleichbreite Spalten eignen sich gut für kompakte Kennzahlen oder Icon-Labels. Das Beispiel ist ein `html`-Block mit `stats-grid`: Das Raster verteilt die Kacheln selbst und zeigt auf schmalen Bildschirmen weniger je Zeile. Ein `columns`-Block mit vier Spalten zeigt bis 980 px Breite zwei Spalten je Zeile, bis 720 px eine. 9 Blocktypen 0 Datenbanken 30 API-Aktionen ∞ Seiten möglich ## 5 Spalten – Maximum Fünf Spalten sind das Maximum des `columns`-Blocks. Sinnvoll für sehr kompakte Inhalte wie Icon-Raster, Logos oder kurze Label-Wert-Paare. Auch hier zeigt das Beispiel ein `stats-grid` im `html`-Block; ein fünfspaltiger `columns`-Block zeigt bis 980 px Breite zwei, bis 720 px eine Spalte je Zeile. Seiten Medien Styles Navigation Konfiguration ## 3 Karten mit Bild – Teaser-Reihe Für Teaser mit Bild oben eignet sich statt des `columns`-Blocks ein `html`-Block mit dem Karten-Raster: `card-grid` als Container, je Teaser eine `card` mit `img`, `h3` und `p`. Das Raster ordnet die Karten automatisch an und bricht mobil um – ganz ohne Spalten-Konfiguration. ![Ahornblatt im Gegenlicht](/media/2026/06/blatt-ahorn-2c89cd98.jpg) ### Struktur Wie ein Blatt: klare Adern, klare Hierarchie. Blöcke geben Inhalten eine Form, die Mensch und Maschine lesen können. ![Farnwedel von oben](/media/2026/06/blatt-farn-30797c5f.jpg) ### Wiederholung Ein Muster, viele Instanzen. Karten im `card-grid` teilen sich Stil und Abstände – Inhalte bleiben individuell. ![Monstera-Blatt mit Lichtdurchlässen](/media/2026/06/blatt-monstera-bca4329f.jpg) ### Flexibilität Aussparungen, wo sie gebraucht werden: Jede Karte kann Bild, Text, Listen oder Buttons enthalten – oder darauf verzichten. ## Asymmetrie ohne Sonder-CSS Der `columns`-Block kennt keine Breitenverhältnisse wie 2:1 – alle Spalten sind gleich breit. Optische Gewichtung entsteht stattdessen über den **Inhalt**: Hier trägt die erste Spalte ein `panel` (weiche, getönte Box) und zieht so den Blick an, während die beiden anderen Spalten ruhiger als reiner Text laufen. Hervorgehoben Diese Spalte ist genauso breit wie die anderen – das `panel` gibt ihr trotzdem das größte Gewicht. So entsteht Asymmetrie über Gestaltung statt über Layout-Parameter. ### Ruhige Spalte Reiner Text ohne Rahmen tritt zurück. Zusammen mit der Panel-Spalte ergibt sich eine klare Lesereihenfolge, obwohl alle drei Spalten technisch gleichwertig sind. ### Noch eine Auf Mobilgeräten stapeln die drei Spalten wie gewohnt: zuerst das Panel, dann die Textspalten – die Gewichtung bleibt also auch unterwegs erhalten. ## Kennzahlen neben Erklärtext Zahlen brauchen Kontext. Ein 2-spaltiger `columns`-Block kombiniert beides: links ein `html`-Block mit `stats-grid` (darin `stat-item` mit `stat-value` und `stat-label`), rechts ein normaler `text`-Block mit der Einordnung. 2–5 Spalten pro Block 720 px Umbruchpunkt 1–2 Ebenen empfohlen 0 Sonder-CSS nötig ### Warum diese Kombination funktioniert Das `stats-grid` ordnet die vier Kennzahlen in der halben Seitenbreite kompakt an, der Text daneben liefert die Geschichte dazu. Auf Mobilgeräten erscheinen erst die Zahlen, dann die Erklärung – die linke Spalte steht oben. Tipp: Die Kennzahlen in die linke Spalte stellen, wenn sie der Blickfang sein sollen – mobil landen sie dann zuerst im Sichtfeld. ## Verschachtelte Spalten Spalten können Spalten enthalten. So entstehen komplexere Layouts: eine breite linke Spalte mit einem Unter-Raster, rechts ein eigenständiger Inhaltsbereich. ### Linke Spalte mit Unter-Raster Diese Spalte enthält selbst wieder einen 2-spaltigen `columns`-Block: #### Unter-Spalte A Inhalt links innen. #### Unter-Spalte B Inhalt rechts innen. ### Rechte Spalte Die rechte äußere Spalte hat keinen weiteren Unter-Block. Verschachtelungen sollten sparsam eingesetzt werden – zu tiefe Strukturen werden auf kleinen Bildschirmen schnell unübersichtlich. - Höchstens 2 Verschachtelungsebenen - Jede Ebene bricht mobil separat um - Block-IDs müssen innerhalb der Seite eindeutig sein – auch in Spalten ## Verschachtelung light – Raster per CSS-Klasse Alternative zur Block-Verschachtelung von oben: Innerhalb einer Spalte steckt kein weiterer `columns`-Block, sondern ein `html`-Block mit `
`. Das spart Struktur, wenn die Unter-Zellen nur kleine HTML-Schnipsel sind. Auch hier gilt: sparsam einsetzen. Diese Spalte enthält ein 2er-Raster aus einem einzigen `html`-Block: **Raster-Zelle A** Per Klasse `cols cols-2` erzeugt – kein eigener Block. **Raster-Zelle B** Bricht mobil genauso um wie echte Spalten. ### Wann welche Variante? - Block-Verschachtelung: wenn die Unter-Inhalte im Editor einzeln bearbeitbar bleiben sollen - CSS-Raster (cols cols-2): für kleine, zusammengehörige HTML-Schnipsel in einem Block - Beides bricht mobil ebenenweise um – tiefe Stapel werden schnell lang - Faustregel: pro Seite höchstens ein bis zwei verschachtelte Raster ## Spalten im Markdown-Export Jede Seite gibt es auch als Markdown – diese hier unter [/spalten.md](/spalten.md). Markdown kennt keine Spalten, deshalb wird der `columns`-Block **linearisiert**: erst alle Blöcke der ersten Spalte, dann die der zweiten, jeweils durch Leerzeilen getrennt. Blockstruktur (gekürzt) ``` { "type": "columns", "data": { "columns": 2, "items": [ [ heading "Links", text "Text links." ], [ heading "Rechts", text "Text rechts." ] ] } } ``` Ausgabe in /spalten.md ``` ### Links Text links. ### Rechts Text rechts. ``` Die Linearisierung folgt derselben Reihenfolge wie der mobile Umbruch: Spalte 1 zuerst. Wer den Markdown-Export nutzt (etwa für KI-Assistenten), sollte Spalten so befüllen, dass sie auch hintereinander gelesen Sinn ergeben. ## Regeln & Hinweise Ein paar Leitlinien für den effizienten Einsatz des `columns`-Blocks: ### ✓ Gut - items-Anzahl immer gleich columns - Spalten mit ähnlich viel Inhalt füllen - Auf Mobildarstellung denken – Reihenfolge zählt - Sprechende Block-IDs pro Spalte vergeben - Bilder immer mit alt-Text versehen - Verschachtelungen gezielt und sparsam einsetzen ### ✗ Vermeiden - items-Anzahl ≠ columns (API: Fehler 422, Admin: Block unsichtbar) - Sehr unterschiedliche Inhaltsmengen pro Spalte - Mehr als 2 Verschachtelungsebenen - 5 Spalten mit langen Texten (zu eng auf Desktop) - Reihenfolge ignorieren (links = oben auf Mobil) - Wichtigen Inhalt rechts stellen (landet mobil unten) **Spaltenreihenfolge auf Mobilgeräten**Die linke Spalte erscheint auf dem Handy zuerst (oben), die rechte zuletzt (unten). Wichtige Inhalte oder CTAs gehören deshalb in die **linke** Spalte – dann landen sie mobil oben, wo sie zuerst gesehen werden. Mehr dazu im Blog: [Spalten mit Verstand: Wann zwei, wann drei – und was auf dem Handy passiert](/news/spalten-mit-verstand). ### Bereit zum Bauen? Die API ist bereit. Alle Blocktypen sind dokumentiert. Fang einfach an – im Admin-Bereich, direkt über die API oder mit einem KI-Assistenten, der die API für dich bedient. [Anleitungen](/anleitungen)[Zur Demo-Übersicht](/demos)