# Demo: Spalten-Layouts im CMF > Zwei bis fünf Spalten im Block-Editor: So baut CMF responsive Mehrspalten-Layouts ohne Page-Builder – die Live-Demo. 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 unter **700 px** automatisch um. Dann werden alle Spalten nacheinander vertikal gestapelt – keine Konfiguration nötig, das passiert automatisch über das 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 (> 700 px) 3 Spalten nebeneinander Mobil (≤ 700 px) 3 Spalten gestapelt **Wichtige Regel:** Die Anzahl der Einträge in `items` muss exakt mit dem Wert von `columns` übereinstimmen. Zu viele oder zu wenige Einträge führen zu einem Validierungsfehler. 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) ### CMF Starter Paket Das Starter-Paket enthält das komplette Content Management Frame inklusive API, Block-System und Admin-Interface. Sofort einsatzbereit für kleine bis mittelgroße Websites. - Dateibasiert – keine Datenbank nötig - JSON-API für Mensch und Maschinen - 9 Blocktypen inklusive - Responsives Spaltenlayout - Medienverwaltung integriert - [Jetzt starten](/kontakt) - [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 ein Maschinen-System 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 ein Maschinen-System 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-Systeme 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. Ladezeiten unter 50 ms sind realistisch. ### 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. ![Portrait Anna M.](/media/2026/03/berge-ad105964.jpg) ### Anna M. **Projektleitung** Verantwortet Struktur und Inhalt. Koordiniert die Zusammenarbeit zwischen redaktionellen und technischen Anforderungen. ![Portrait Ben K.](/media/2026/03/baum-ccef037f.jpg) ### Ben K. **Entwicklung** Zuständig für API, Blockstruktur und serverseitige Logik. Mag sauberen Code und klare Schnittstellen. ![Portrait Clara S.](/media/2026/03/stadt-b4032abb.jpg) ### Clara S. **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 und Nav-Position direkt im ersten Request mitgeben. 2 ### Inhalte füllen Blöcke per `page_update` hinzufügen. Medien zuerst hochladen, `src`-Pfad vom Upload-Response verwenden. 3 ### Veröffentlichen Status auf `"published"` setzen – die Seite erscheint sofort in der Navigation und ist öffentlich erreichbar. ## 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-Systeme schwer zu nutzen ### CMF - Keine Datenbank - Dateien hochladen – fertig - Kein Plugin-System - Minimaler Wartungsaufwand - JSON-API für Mensch und Maschinen ## 4 Spalten – Kennzahlen Vier gleichbreite Spalten eignen sich gut für kompakte Kennzahlen oder Icon-Labels. Auf Mobilgeräten stapeln sich alle vier untereinander. 9 Blocktypen 0 Datenbanken 1 API-Endpunkt ∞ Seiten möglich ## 5 Spalten – Maximum Fünf Spalten sind das Maximum im CMF. Sinnvoll für sehr kompakte Inhalte wie Icon-Raster, Logos oder kurze Label-Wert-Paare. Auf schmalen Bildschirmen stapeln alle fünf. 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 700 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. - Maximal 1–2 Verschachtelungsebenen - Jede Ebene bricht mobil separat um - IDs in inneren Blöcken müssen seitenübergreifend eindeutig sein ## 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 Maschinen-Systeme), 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 → Validierungsfehler - Sehr unterschiedliche Inhaltsmengen pro Spalte - Mehr als 3 Verschachtelungsebenen - 5 Spalten mit langen Texten (zu eng auf Desktop) - Reihenfolge ignorieren (links = oben auf Mobil) - Wichtigen Inhalt rechts stellen (sieht mobil aus) **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. ### Bereit zum Bauen? Die API ist bereit. Alle Blocktypen sind dokumentiert. Fang einfach an – entweder direkt über die API oder mit Maschinen-Unterstützung. [Anleitungen](/anleitungen)[Zur Demo-Übersicht](/demos)