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

> Teil 4 der Quarkdown-Reihe: Wie du mit .row, .column, .grid, .container und .box Inhalte auf der Seite anordnest — und warum die Leerzeile dabei entscheidet.

Source: https://www.jpkc.com/db/blog/quarkdown-layout/

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](https://www.jpkc.com/db/blog/quarkdown-dokumenttypen-themes/) 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}`)

```markdown
.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:

```markdown
.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:

```markdown
.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.

```markdown
.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`.

```markdown
.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](https://www.jpkc.com/db/blog/quarkdown-einstieg/) 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](https://quarkdown.com/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](https://www.jpkc.com/db/blog/quarkdown-dokumenttypen-themes/). 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](https://quarkdown.com/wiki).