> ## 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 Settings for Element Alignment and Spacing

> Control layout settings to align elements, manage spacing, and create clean, responsive landing page designs with ease.

The Layout settings control **how elements are arranged inside a container**.\
This is where you decide if items go **side by side, stacked, centered, spaced, etc.**

<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>

## The 4 Key Settings

## 1. Direction (Most Important)

This controls **how items are placed inside the container**.

### Horizontal (Row)

* Elements go **left → right**
* Example: buttons next to each other

👉 Use this for:

* Rows
* Inline elements
* Columns side by side

### Vertical (Column)

* Elements go **top → bottom**
* Example: title → text → button

👉 Use this for:

* Forms
* Stacked content
* Most layouts (default)

<Warning>
  If something is not aligning correctly, check Direction first — this is the #1 issue users face.
</Warning>

***

## 2. Distribution (Spacing Between Items)

This controls **how items are spaced across the container**.

Common options:

* **Start** → items stick to the beginning
* **Center** → items stay in the middle
* **End** → items go to the end
* **Space Between** → first left, last right, space in between
* **Space Around** → equal space around items

***

👉 Example:

If you have 3 buttons:

* Space Between → spread across full width
* Center → grouped in the middle

***

## 3. Align Items (Alignment)

This controls alignment on the **opposite axis of Direction**.

### If Direction = Row (horizontal):

* Align Items = vertical alignment
  * Top
  * Center
  * Bottom

***

### If Direction = Column (vertical):

* Align Items = horizontal alignment
  * Left
  * Center
  * Right

<Note>
  **Important:**

  * Direction = main axis
  * Align Items = cross axis

  (This is where most confusion happens)
</Note>

***

## 4. Gap

* Controls space **between elements**
* Works like automatic spacing

👉 Example:

* Gap = 20 → adds equal spacing between all items

***

# Simple Examples

### Example 1: Center everything

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

👉 Result: everything perfectly centered

***

### Example 2: Buttons in a row

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

👉 Result: buttons spread across horizontally

***

### Example 3: Simple form layout

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

👉 Result: clean vertical form

***

## Common Mistakes

❌ Trying to center elements without changing Direction\
❌ Confusing Align Items with Distribution\
❌ Adding margin instead of using Gap\
❌ Forgetting container controls child elements

***

## Best Practices

* Start with **Column** for most layouts
* Use **Row only when needed**
* Use **Gap instead of manual spacing**
* Keep layouts simple and consistent

<Note>
  **Golden Rule:**\
  If something looks “wrong”, it’s almost always:

  * Wrong Direction
  * Wrong Alignment
</Note>