Sizing

Every AutoLayout element sets a sizing mode per axis. There are six modes — pick the one that matches your intent and the engine resolves the actual pixels.

The six modes

Mode	Inspector	Builder	Resolves to
Pixels	`Pixels` + value	`.Width(120f)` / `.Height(40f)`	The literal pixel value
Hug	`Hug`	`.WidthHug()` / `.HeightHug()` / `.Hug()`	Sum of children + padding
Fill	`Fill` + weight	`.WidthFill()` / `.HeightFill(2f)` / `.Fill()`	Share of parent’s free space, by weight
Percentage	`Percentage` + value	`.WidthPercent(50)` / `.HeightPercent(25)`	A percentage (0–100) of parent size
AspectRatio	`AspectRatio` + ratio	`.WidthAspect(1.5f)` / `.HeightAspect(1f)`	width × ratio (or height × ratio for HeightAspect)
Raw / TextSize	`Raw`	`.WidthTextSize()` / `.TextSize()`	Intrinsic size of TMP / Image content

The two axes are independent — a node can be WidthFill + HeightHug (a row that fills horizontally and shrinks to its tallest child).

Pixels

The simplest mode. Width or Height is exactly that many pixels.

AutoUI.Create().Width(200).Height(60).Background(Color.gray).Build();

When to use: fixed-size elements (icons, dividers, sized buttons).

Hug

The element shrinks to wrap its children’s combined size + the element’s own padding.

AutoUI.Create().WidthHug().HeightHug()
    .Padding(12)
    .Background(Color.gray)
    .Children(
        AutoUI.Create().Text("Hug content")
    )
    .Build();

When to use: containers whose size depends on what’s inside (chips, toolbars, buttons-with-text).

Edge case: a Hug leaf with no children resolves to its padding alone (or 0×0 if no padding). For text-only leaves, use .TextSize() instead — see Raw / TextSize below.

Fill

The element shares the parent’s remaining space with other Fill siblings. Allocation is proportional to the weight argument (default 1f).

AutoUI.Create().Row().WidthFill()
    .Children(
        AutoUI.Create().WidthFill(1f),    // 1/3 of remaining
        AutoUI.Create().WidthFill(2f)     // 2/3 of remaining
    )
    .Build();

When to use: anything that should grow to fit (sidebar layouts, content panes, flex-grow behavior).

Cross-axis: WidthFill inside a Column means “fill the column’s full width” (no weight competition since there’s only one cross-axis dimension to share).

Percentage

Resolves to a percentage of the parent’s size on the same axis. Argument is 0–100.

AutoUI.Create().WidthPercent(50).HeightPercent(25).Build();

When to use: responsive layouts that scale with parent (modal widths, hero banner heights). Prefer Fill when you have multiple flexible siblings; prefer Percentage when you want a specific fraction independent of siblings.

AspectRatio

Locks one axis to a multiple of the other. WidthAspect(2f) means “this is twice as wide as it is tall.”

AutoUI.Create().Height(120).WidthAspect(1.5f).Build();    // 180×120
AutoUI.Create().Width(200).HeightAspect(1f).Build();      // 200×200 (square)

When to use: thumbnails, video frames, square avatars. The engine resolves the dependent axis after the independent one is known — make sure at least one axis has a definite size (Pixels, Fill, Percentage, or Hug-with-content).

Raw / TextSize

The element measures its TMP text or Image content and uses that as the size.

AutoUI.Create().TextSize().Text("This sizes to its text", 14f).Build();

When to use: text labels and icons. TextSize() sets both axes; WidthTextSize() / HeightTextSize() set one axis and let you choose the other (e.g. .WidthFill().HeightTextSize() = full-width text that shrinks vertically to its content).

If a Raw text element has MaxWidth set, TMP wraps and Height grows to accommodate the wrapped lines.

Constraints

Every mode can be clamped:

AutoUI.Create().WidthFill().MinWidth(120).MaxWidth(400)
    .HeightHug().MinHeight(40)
    .Build();

MinWidth/MaxWidth/MinHeight/MaxHeight are pure floats in pixels. Use them to bound a Fill so it doesn’t collapse below or grow above sensible limits.

Cheatsheet — picking a mode

I know the exact size → Pixels
This element should grow to fit → Hug (children) or TextSize (text)
I want it to fill remaining space → Fill
I want a specific fraction of parent → Percentage
It must keep a width:height ratio → AspectRatio
I have a TMP/Image and want its natural size → TextSize / Raw

Overview — full property index
RowColumn — how Fill/Hug interact in flex layouts
Grid — how track sizing interacts with cell content sizing
AutoUI — builder reference