OpenSkillIndex← back to search
claude-codedevelopment

Gum gum-layout

install
source · Clone the upstream repo
git clone https://github.com/vchelaru/Gum
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/vchelaru/Gum "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/gum-layout" ~/.claude/skills/vchelaru-gum-gum-layout && rm -rf "$T"
manifest: .claude/skills/gum-layout/SKILL.md
tags
#ui-layout#dimension-units#children-layout#position-units#anchor-dock
source content

Gum Layout System

Gum's layout is driven by unit enums that tell the engine how to interpret numeric Width/Height/X/Y values, plus a children layout mode on containers. All layout lives in 

GraphicalUiElement
(
GumRuntime/GraphicalUiElement.cs
).

Key Concepts

Dimension Units (Width & Height)

DimensionUnitType
enum (
GumDataTypes/DimensionUnitType.cs
) controls how a Width or Height value is interpreted. Units fall into dependency categories:

DependencyUnits
No dependencyAbsolute, PercentageOfSourceFile, PercentageOfOtherDimension, MaintainFileAspectRatio, AbsoluteMultipliedByFontScale, ScreenPixel
Depends on parentPercentageOfParent, RelativeToParent, RelativeToMaxParentOrChildren*
Depends on childrenRelativeToChildren
Depends on siblingsRatio

* 

RelativeToMaxParentOrChildren
is classified as 
DependsOnParent
but also depends on children — special-cased throughout the layout engine. See dimension-units.md for circular dependency handling.

See dimension-units.md for detailed descriptions.

Position Units (X & Y)

GeneralUnitType
enum (
GumDataTypes/UnitConverter.cs
) controls how X/Y values are measured: from edges, center, baseline, or as percentages. Combined with XOrigin/YOrigin (HorizontalAlignment/VerticalAlignment) to set which point on the element is being positioned.

See dimension-units.md for detailed descriptions.

Children Layout

ChildrenLayout
enum (
Gum/Managers/StandardElementsManager.cs
):

  • Regular — children positioned independently
  • TopToBottomStack / LeftToRightStack — stack children along an axis
  • AutoGridHorizontal / AutoGridVertical — arrange in wrapping grid

Related properties: 

StackSpacing
, 
WrapsChildren
, 
AutoGridHorizontalCells
, 
AutoGridVerticalCells
, 
StackedRowOrColumnDimensions
.

Anchor & Dock

Convenience APIs on 

GraphicalUiElement
that set multiple layout properties at once (X, Y, XUnits, YUnits, XOrigin, YOrigin, Width, WidthUnits, etc.).

  • Anchor — 9 positions (TopLeft..BottomRight) + CenterHorizontally/Vertically
  • Dock — Top, Left, Right, Bottom, Fill, FillHorizontally, FillVertically, SizeToChildren

Layout Engine

See layout-engine.md for the calculation flow, suspension system, dirty tracking, and performance considerations.

Quick Reference

MethodPurpose
UpdateLayout()
Full layout recalculation
UpdateLayout(updateParent, childrenUpdateDepth, xOrY)
Granular control
SuspendLayout(recursive)
Pause layout, queue as dirty
ResumeLayout(recursive)
Resume and apply queued updates
GetAbsoluteWidth()
/ 
GetAbsoluteHeight()
Final computed dimensions
MakeDirty(...)
Queue deferred update when suspended

Key Properties

  • IsLayoutSuspended
    — instance-level pause
  • IsAllLayoutSuspended
    — thread-static global pause (background loading)
  • GlobalFontScale
    — multiplier for AbsoluteMultipliedByFontScale
  • CanvasWidth
    / 
    CanvasHeight
    — root canvas size