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

# Layout and alignment

> Select, group, align and auto-arrange the elements in an overlay.

Tidy alignment makes an overlay look designed, not dropped in.

**Ask the Agent:** "Line up the three feature cards in a row with even spacing." · "Center the logo above the headline."

## Do it yourself

### Select and move

| To | Do this |
| - | - |
| Select | Click an element. Shift-click to add more, or drag across empty space to box select. |
| Go into a group | Double-click it. Press Escape to step back out or deselect. |
| Resize | Drag a handle. Hold Shift to keep proportions, or Option to resize from the center. |
| Rotate | Drag from just outside a corner. Hold Shift to snap to 15°. |
| Rotate exactly or flip | Click **Show Detail Panel**. Under **Position**, type a **Rotation**, or click **Rotate 90°**, **Flip Horizontal** or **Flip Vertical**. |
| Skip snapping | Hold Control while you drag. |
| See spacing | Hold Option and hover another element. |

### Groups and auto layout

Select a few elements and press ⌘G to group them, or ⌘⇧G to ungroup. Right-click several elements and choose **Add Horizontal Layout** or **Add Vertical Layout** to group them in a row or column.

With a group selected, choose **Freeform**, **Horizontal Layout** or **Vertical Layout** in the top bar. In a row or column, use the alignment grid to line things up, **Gap** to set the spacing, and **Align text baselines** to sit text on the same line.

<video autoPlay muted loop playsInline src="https://mintcdn.com/yarn/5d87hh-DSpIitaVH/images/layout-vertical-layout.mp4?fit=max&auto=format&n=5d87hh-DSpIitaVH&q=85&s=a22065c084d139fa15a25cf13329e1e9" aria-label="Selecting a search pill and clicking Vertical Layout, which stacks its icon above its text" />

### Align and order

Select the overlay and click **Show Detail Panel** to see the **Layers** list. Click a layer to select it. The Detail Panel's align buttons, like **Align Left** and **Align Middle**, line one element up with its container, or several elements with each other.

To change what's on top, right-click an element and choose **Bring to Front**, **Bring Forward**, **Send Backward** or **Send to Back**.

**Related:** [Colors and effects](https://docs.yarn.so/overlays/styling.md) · [Keyboard shortcuts](https://docs.yarn.so/keyboard-shortcuts.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.