UI Containers

Available Scripts

responsive_layout_builder.gd

responsive_grid.gd

NEVER Do in UI Containers

• NEVER set child position/size manually in Container —

  child.position = Vector2(10, 10)

  inside HBoxContainer? Container overrides it on layout. Use

  custom_minimum_size

  OR margins instead.
• NEVER forget size_flags for expansion — Child in VBoxContainer doesn't expand? Default is SHRINK. Set

  size_flags_vertical = SIZE_EXPAND_FILL

  for fill behavior.
• NEVER use GridContainer without columns —

  GridContainer

  with default

  columns = 1

  ? Vertical list, wrong layout. ALWAYS set

  columns

  property to grid width.
• NEVER nest too many containers — 10 levels of HBox in VBox in HBox? Re-layout overhead + hard to debug. Flatten OR use Control with custom layout.
• NEVER skip separation override — Default 4px separation? Cramped UI. Override with

  add_theme_constant_override("separation", value)

  for breathing room.
• NEVER use ScrollContainer without minimum size — ScrollContainer with no

  custom_minimum_size

  ? Expands infinitely, no scrolling. Set minimum OR use anchors.

# VBoxContainer example
# Automatically stacks children vertically
# Children:
#   Button ("Play")
#   Button ("Settings")
#   Button ("Quit")

# Set separation between items
$VBoxContainer.add_theme_constant_override("separation", 10)

Responsive Layout

# Use anchors and size flags
func _ready() -> void:
    # Expand to fill parent
    $MarginContainer.set_anchors_preset(Control.PRESET_FULL_RECT)
    
    # Add margins
    $MarginContainer.add_theme_constant_override("margin_left", 20)
    $MarginContainer.add_theme_constant_override("margin_right", 20)

SizeFlags

# Control how children expand in containers
button.size_flags_horizontal = Control.SIZE_EXPAND_FILL
button.size_flags_vertical = Control.SIZE_SHRINK_CENTER

Reference

• Godot Docs: GUI Containers

Related

• Master Skill: godot-master