> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout-Einstellungen für Ausrichtung und Abstände

> Steuern Sie über die Layout-Einstellungen die Ausrichtung von Elementen und ihre Abstände und gestalten Sie sauber aufgebaute, responsive Landingpages.

Die Layout-Einstellungen steuern, **wie Elemente innerhalb eines Containers angeordnet werden**.<br />Hier entscheiden Sie, ob Elemente **nebeneinander, gestapelt, zentriert, verteilt usw.** dargestellt werden.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/layout.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=afda0f90df4a03e3db8fe710c9032e0e" alt="Layout" width="1920" height="992" data-path="images/layout.png" />
</Frame>

## Die 4 wichtigsten Einstellungen

## 1. Direction (am wichtigsten)

Diese Einstellung steuert, **wie Elemente im Container platziert werden**.

### Horizontal (Row)

* Elemente verlaufen **von links nach rechts**
* Beispiel: Schaltflächen nebeneinander

👉 Nutzen Sie das für:

* Zeilen
* Inline-Elemente
* Spalten nebeneinander

### Vertical (Column)

* Elemente verlaufen **von oben nach unten**
* Beispiel: Titel → Text → Schaltfläche

👉 Nutzen Sie das für:

* Formulare
* Gestapelte Inhalte
* Die meisten Layouts (Standard)

<Warning>
  Wenn sich etwas nicht korrekt ausrichten lässt, prüfen Sie zuerst Direction – das ist das häufigste Problem.
</Warning>

***

## 2. Distribution (Abstand zwischen Elementen)

Diese Einstellung steuert, **wie Elemente über den Container verteilt werden**.

Häufige Optionen:

* **Start** → Elemente sammeln sich am Anfang
* **Center** → Elemente bleiben in der Mitte
* **End** → Elemente rücken ans Ende
* **Space Between** → erstes Element links, letztes rechts, Abstand dazwischen
* **Space Around** → gleichmäßiger Abstand rund um die Elemente

***

👉 Beispiel:

Bei drei Schaltflächen:

* Space Between → über die volle Breite verteilt
* Center → in der Mitte gruppiert

***

## 3. Align Items (Ausrichtung)

Diese Einstellung steuert die Ausrichtung auf der **Gegenachse zu Direction**.

### Wenn Direction = Row (horizontal):

* Align Items = vertikale Ausrichtung
  * Oben
  * Zentriert
  * Unten

***

### Wenn Direction = Column (vertikal):

* Align Items = horizontale Ausrichtung
  * Links
  * Zentriert
  * Rechts

<Note>
  **Wichtig:**

  * Direction = Hauptachse
  * Align Items = Querachse

  (Hier entsteht die meiste Verwirrung)
</Note>

***

## 4. Gap

* Steuert den Abstand **zwischen Elementen**
* Funktioniert wie eine automatische Abstandsregelung

👉 Beispiel:

* Gap = 20 → erzeugt gleichmäßige Abstände zwischen allen Elementen

***

# Einfache Beispiele

### Beispiel 1: Alles zentrieren

* Direction: Vertical
* Align Items: Center
* Distribution: Center

👉 Ergebnis: alles perfekt zentriert

***

### Beispiel 2: Schaltflächen in einer Zeile

* Direction: Horizontal
* Distribution: Space Between
* Align Items: Center

👉 Ergebnis: Schaltflächen horizontal verteilt

***

### Beispiel 3: Einfaches Formularlayout

* Direction: Vertical
* Align Items: Left
* Gap: 10–20

👉 Ergebnis: ein sauberes vertikales Formular

***

## Häufige Fehler

❌ Elemente zentrieren wollen, ohne Direction zu ändern<br />❌ Align Items mit Distribution verwechseln<br />❌ Margin verwenden, statt Gap zu nutzen<br />❌ Vergessen, dass der Container die untergeordneten Elemente steuert

***

## Bewährte Vorgehensweisen

* Starten Sie bei den meisten Layouts mit **Column**
* Nutzen Sie **Row nur, wenn es nötig ist**
* Verwenden Sie **Gap statt manueller Abstände**
* Halten Sie Layouts einfach und einheitlich

<Note>
  **Goldene Regel:**<br />Wenn etwas „falsch“ aussieht, liegt es fast immer an:

  * Der falschen Direction
  * Der falschen Ausrichtung
</Note>