Sizing

Width and Height are independent — a node can fill horizontally (Width = Fill) while shrinking to its tallest child (Height = Hug). Each axis picks one of six sizing modes, plus a value for some.

Sizing modes

Type the mode name or a unit suffix into the Width/Height field (see Inspector Input):

Mode	Inspector field	Resolves to
Pixels	a number, e.g. 120	The literal pixel value
Hug	hug	Sum of children + padding
Fill	fill (+ weight)	Share of parent’s free space, by weight
Percentage	50%	A percentage (0–100) of parent size
AspectRatio	a ratio, e.g. 1.5x	width × ratio (or height × ratio)
TextSize	ts	Intrinsic bounds of the element’s TMP text

Pixels

Pixels

A literal pixel value, unaffected by parent or children — for fixed-size elements like icons, dividers, sized buttons.

layout.Width = UIDimension.Pixels(120f);
layout.Height = UIDimension.Pixels(40f);

Hug

Hug

Shrink-wraps to the children's combined size plus the element's own padding. A Hug leaf with no children resolves to its padding alone.

Inspector

Set Width and Height to Hug (type hug).

Code

layout.Width = UIDimension.Hug();
layout.Height = UIDimension.Hug();

For text-only leaves, use TextSize instead.

Fill

Fill

Shares the parent's remaining space with other Fill siblings, proportional to the weight argument (default 1).

Inspector

Set Width to Fill (type fill); set a weight for proportional sharing.

Code

layout.Width = UIDimension.Fill();      // weight 1
layout.Width = UIDimension.Fill(2f);    // weight 2 — takes twice the space

Cross-axis: a Width of Fill inside a Column means “fill the column’s full width.”

Percentage

Percentage

A fixed fraction of the parent's size on the same axis — independent of siblings.

Inspector

Set Width to 50%.

Code

layout.Width = UIDimension.Percentage(50f);   // always half the parent's width

Use Fill when siblings should share leftover space; use Percentage when you want a specific fraction independent of siblings.

AspectRatio

AspectRatio

Locks one axis to a multiple of the other — an AspectRatio of 2 is 'twice as wide as it is tall.'

Inspector

Set Width Fill and Height to AspectRatio 1 (a square).

Code

layout.Width = UIDimension.Fill();
layout.Height = UIDimension.AspectRatio(1f);   // square: height tracks width

Make sure at least one axis has a definite size (Pixels, Fill, Percentage, or Hug-with-content).

TextSize

TextSize

Measures the element's TMP text and uses those bounds. Text-only — there's no equivalent for images.

Inspector

Set Width/Height to TextSize (type ts).

Code

layout.Width = UIDimension.TextSize();
layout.Height = UIDimension.TextSize();

TextSize can apply to both axes or just one — e.g. a full-width label (Width = Fill) that shrinks vertically to its wrapped text (Height = TextSize). If a TextSize element has MaxWidth set, TMP wraps and Height grows to fit.

Cheatsheet

• 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 text and want its natural size → TextSize

Min and Max

Every mode can be clamped per-axis:

Min / Max

Clamp any mode per-axis. Bound a Fill so it doesn't collapse below or grow above sensible limits, or give a Hug element a floor.

Inspector

Set Min Width 120, Max Width 400, and Min Height 40.

Code

layout.MinWidth = 120f;
layout.MaxWidth = 400f;
layout.MinHeight = 40f;

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, or to give a Hug element a sensible floor.

Inspector input

Width and Height inspector fields parse unit suffixes and math — type 120px, 50%, 1.5x, fill, hug, 100+50px, or (1920/3)px and the field switches modes in one shot. See Inspector Input for the full syntax.

Related

• Inspector Input — type units and math directly into sizing fields
• Absolute — how Width/Height interact with absolute constraints
• Row & Column — how Fill/Hug interact inside Row and Column
• Grid — how track sizing interacts with cell content sizing
• AutoUI — builder reference