Expert blueprint for responsive UI layouts using Container nodes (HBoxContainer, VBoxContainer, GridContainer, MarginContainer, ScrollContainer). Covers size flags, anchors, split containers, and dynamic layouts. Use when building adaptive interfaces OR implementing responsive menus. Keywords Container, HBoxContainer, VBoxContainer, GridContainer, size_flags, EXPAND_FILL, anchors, responsive.
Use this skill when layout responsiveness matters more than hand-placed control coordinates.
Focus:
Builder for breakpoint-based responsive layouts.
Grid helper that adapts column count to available width.
GridContainer without explicitly setting its column strategy.ScrollContainer without a bounded child layout.$VBoxContainer.add_theme_constant_override("separation", 10)
func _ready() -> void:
$MarginContainer.set_anchors_preset(Control.PRESET_FULL_RECT)
$MarginContainer.add_theme_constant_override("margin_left", 20)
$MarginContainer.add_theme_constant_override("margin_right", 20)
button.size_flags_horizontal = Control.SIZE_EXPAND_FILL
button.size_flags_vertical = Control.SIZE_SHRINK_CENTER
VBoxContainer and HBoxContainer for linear groups.GridContainer for inventories and tiled option sets.MarginContainer to create outer breathing room.ScrollContainer when the content should stay bounded while overflowing.