Quarkdown: Inhalt anordnen — Stacks, Container, Boxen & Grids

Markdown kann vieles, aber eines noch nie: Inhalte nebeneinander anordnen. Zwei Spalten, eine Bildgalerie, eine Visitenkarte, ein Raster aus Kacheln — dafür griff man bisher zu rohem HTML. Quarkdown macht Layout zu Funktionen. In Teil 3 ging es um das Dokument als Ganzes; jetzt ordnen wir den Inhalt innerhalb der Seite an. Die Werkzeuge dafür sind überschaubar — und ein einziges Detail entscheidet, ob sie funktionieren.

Stacks: Zeilen, Spalten, Raster

Die drei Stack-Funktionen arrangieren eine Gruppe von Elementen nach einer Layout-Regel:

.row — nebeneinander
.column — untereinander
.grid — im Raster (benötigt columns:{n})

.row gap:{1cm}
    A

    B

    C

Alle drei akzeptieren alignment (Hauptachse: start, center, end, spacebetween, spacearound, spaceevenly), cross (Querachse: start, center, end, stretch) und gap (Abstand). .grid kennt zusätzlich vgap/hgap für getrennte vertikale und horizontale Abstände.

Die wichtigste Regel: die Leerzeile

Stack-Funktionen arbeiten mit dem strengen Markdown-Begriff des Blocks — einem isolierten Stück Dokument: ein Absatz, ein Code-Block, eine Liste, ein Bild, ein Funktionsaufruf. Daraus folgt die häufigste Stolperfalle überhaupt:

.row gap:{1cm}
    A
    B
    C

Das ergibt eine Spalte, nicht drei — weil A B C ohne Leerzeilen ein einziger Absatz sind. Erst die Leerzeile zwischen den Elementen macht sie zu getrennten Blöcken. Wer das einmal verinnerlicht hat, spart sich die meisten Layout-Frusterlebnisse.

Container: Layout zurücksetzen und gestalten

Was, wenn ein Element selbst aus mehreren Blöcken besteht — etwa Überschrift und Text in einer Spalte? Dann brauchst du den .container. Er gruppiert beliebig viele Blöcke zu einer Einheit und setzt die Layout-Regeln auf den normalen Dokumentfluss zurück:

.row alignment:{center} gap:{1cm}
    .container
        ##! Links
        Text der linken Spalte.

    .container
        ##! Rechts
        Text der rechten Spalte.

Darüber hinaus ist .container Quarkdowns flexibelster Gestaltungsbaustein: width, height, fullwidth, foreground, background, border/borderwidth/borderstyle, margin, padding, radius, Ausrichtung und eine ganze Reihe von Schrift-Parametern (fontsize, fontweight, fontstyle, fontvariant, textcase …). Mit classname hängst du eine eigene CSS-Klasse an.

.container fullwidth:{yes} borderstyle:{dashed} padding:{1cm} fontstyle:{italic} fontvariant:{smallcaps}
    Ein gestalteter Container. Schick, oder?

Boxen: typisierte Hinweise

Die .box ist ein Spezial-Container mit Inline-Titel und Block-Inhalt — der Klassiker für Hinweise, Tipps und Warnungen. Fünf Typen stehen bereit: callout (Default), tip, note, warning, error.

.box {Achtung} type:{warning}
    Das hier solltest du nicht übersehen.

Ein schönes Detail: Lässt du den Titel weg und hast .doclang gesetzt, lokalisiert Quarkdown den Titel automatisch — eine type:{tip}-Box heißt auf Deutsch „Tipp", auf Englisch „Tip". Genau so habe ich im Quickstart-Beispiel aus Teil 1 eine eigene .example-Funktion gebaut, die nichts anderes ist als eine vorkonfigurierte Box.

Mehr Layout-Bausteine

Quarkdown bringt weitere fertige Bausteine mit, die ich hier nur streife: .align und .float für Ausrichtung und umflossene Elemente, .clip zum Zuschneiden (etwa kreisrunde Bilder), .collapsible für aufklappbare Abschnitte, .filetree für Verzeichnisbäume (den habe ich in dieser Reihe schon mehrfach benutzt) und .whitespace für gezielten Leerraum. Alle folgen demselben Muster: ein Funktionsaufruf, ein eingerückter Body. Die vollständige Referenz steht in der Layout-Sektion der Wiki.

FAQ

Warum erscheint mein `.row` als eine einzige Spalte?

Fast immer fehlt die Leerzeile zwischen den Elementen. Ohne sie verschmelzen sie zu einem Absatz, den der Stack als einen Block behandelt. Eine Leerzeile zwischen je zwei Items löst das.

Wann `.container`, wann `.column`?

.column ist eine Layout-Regel (stapelt Elemente vertikal mit Abständen). .container ist das Gegenteil — es hebt Layout-Regeln auf und bündelt mehrere Blöcke zu einer Einheit. Willst du in einer Zeile mehrere mehrteilige Inhalte nebeneinander, ist .container das richtige Werkzeug.

Kann ich Stacks verschachteln?

Ja, beliebig. .row in .column in .grid — so baust du Visitenkarten, Dashboards und komplexe Seitenraster aus denselben drei Bausteinen. Die Komposition ist genau das, was Quarkdown mächtig macht.

Weiterlesen

Den Rahmen dazu setzt Teil 3: Dokumenttypen, Themes & Seiten-Setup. Als Nächstes wird es datengetrieben: Tabellen, CSV-Import und Diagramme — wie Quarkdown aus Daten automatisch Tabellen, XY-Charts und Mermaid-Grafiken erzeugt. Die komplette Layout-Referenz findest du in der offiziellen Wiki.