# Layout

> Anchors, offsets and auto layout in Envy work like Godot's Control anchors and box containers, so one layout holds at 16:9, 21:9, 16:10 and 4:3.

Source: https://envyui.com/docs/layout

Envy's layout model is Godot's. Every layer has **anchors** and **offsets** like a Godot `Control`, and frames can lay out their children automatically like `HBoxContainer` and `VBoxContainer`. Nothing is translated on export: the Godot runtime copies the numbers 1:1.

## Anchors and offsets

Anchors are fractions of the parent rectangle, from 0 to 1, for the left, top, right and bottom edges. Offsets are pixels added to the anchored edges.

| Anchors (l, t, r, b) | Behaves like |
|---|---|
| 0, 0, 0, 0 | Pinned to the top-left corner (the default) |
| 1, 0.5, 1, 0.5 | Pinned to the right edge, centered vertically |
| 0, 1, 1, 1 | Stretches along the bottom edge |
| 0, 0, 1, 1 | Fills the parent |

In The Last Hunt's main menu, the menu is anchored right and middle, the last-save card to the bottom right, and the header stretches across the top. Change the screen to 21:9 or 4:3 and each group stays where it belongs, with no second layout. You can see it on the [home page](/#design).

In the inspector, the anchor widget sets common presets in one click, and the raw numbers are there when you need them.

## Auto layout

A frame or button can arrange its children in a **row** or a **column** (Shift A toggles it):

- `gap` between children, `padding` inside the frame.
- `align` on the cross axis (start, center, end) and `justify` on the main axis (start, center, end, space-between).
- `wrap` moves children onto new lines, with `lineGap` between lines.

Children inside auto layout size themselves with **fixed**, **fill** or **hug** on each axis.

| Envy | Godot | Web |
|---|---|---|
| Row / column | `PanelContainer` › `HBoxContainer` / `VBoxContainer` | Flexbox |
| Wrap | `HFlowContainer` / `VFlowContainer` | `flex-wrap` |
| Padding | Content margins | Padding |
| Fill | `SIZE_EXPAND_FILL` | `flex: 1` |
| Space-between | Expanding spacers | `justify-content: space-between` |

## Scaling

Both runtimes scale the screen's design resolution to fit the window and stretch the root to the window's aspect ratio, like Godot's `canvas_items` stretch mode with `expand`. Anchors decide how each layer follows.

## Rotation

`rotation` turns a layer around its center in degrees. It doesn't affect layout.

## Design aids

Rulers (Shift R), guides dragged off the rulers, and layout grids (columns, rows or a square grid) help you line things up. Layers snap to guides and grid edges. Runtimes ignore all of them.