Control layout in Godot 4

Most broken Godot UIs come from three mistakes: positioning children of a container by hand, anchoring a control without resetting its offsets, and leaving the stretch settings at their defaults. Lay out with containers, anchor only the root of each UI, and let minimum sizes drive everything else.

Containers own their children

A child of any Container (VBoxContainer, HBoxContainer, GridContainer, MarginContainer, PanelContainer, CenterContainer, ScrollContainer, FlowContainer) cannot keep its own position, size or anchors: the container overwrites them on the next sort. Control a child's share of space with:

• size_flags_horizontal / size_flags_vertical: Control.SIZE_FILL (default), SIZE_EXPAND_FILL to take spare space, SIZE_SHRINK_CENTER / SIZE_SHRINK_END to stay small and aligned.
• size_flags_stretch_ratio: share of spare space between expanding siblings.
• custom_minimum_size: the smallest size the child accepts. Containers never shrink a child below its combined minimum size, which is how text and buttons avoid being cut off.

Pick the container by layout: rows or columns (VBoxContainer, HBoxContainer), a grid (GridContainer with columns), padding (MarginContainer, padding set by theme constants margin_left, margin_top, margin_right, margin_bottom), a background (PanelContainer, style box panel), long content (ScrollContainer with one child that has SIZE_EXPAND_FILL), wrapping items (HFlowContainer).

Anchors for the root only

Anchors place a control relative to its parent's rectangle and are what you use for the outermost UI node. From code, use set_anchors_and_offsets_preset(). set_anchors_preset() only moves the anchors and keeps the old offsets, so a control created in code stays at size (0, 0).

Presets: PRESET_FULL_RECT, PRESET_TOP_LEFT, PRESET_TOP_RIGHT, PRESET_BOTTOM_LEFT, PRESET_BOTTOM_RIGHT, PRESET_CENTER, PRESET_TOP_WIDE, PRESET_BOTTOM_WIDE, PRESET_LEFT_WIDE, PRESET_RIGHT_WIDE, PRESET_HCENTER_WIDE, PRESET_VCENTER_WIDE, and the centre-edge presets such as PRESET_CENTER_TOP.