Makepad 2.0 Layout System

Makepad uses a layout turtle system -- not CSS flexbox, not CSS grid. The turtle walks through children one by one, placing each widget according to two core concepts:

• Walk -- how a widget sizes itself (width, height, margin)
• Layout -- how a container arranges its children (flow, spacing, padding, align)

Every container widget (View, SolidView, RoundedView, ScrollYView, etc.) has both Walk properties (its own size) and Layout properties (how it lays out children).

---

Walk System (Widget Sizing)

Walk controls how an individual widget claims space inside its parent.

width / height

Syntax	Meaning
width: Fill	Fill all remaining horizontal space (default)
width: Fit	Shrink to fit content
width: 200	Fixed 200 pixels
width: Fill{min: 100 max: 500}	Fill with constraints
width: Fit{max: Abs(300)}	Fit content, capped at 300px
height: Fill	Fill all remaining vertical space (default)
height: Fit	Shrink to fit content
height: 100	Fixed 100 pixels

use mod.prelude.widgets.*

// Fill: takes all available width
View{
    width: Fill height: Fit
    flow: Down
    Label{text: "I stretch to fill the width"}
}

// Fit: shrinks to content
View{
    width: Fit height: Fit
    padding: 10
    Label{text: "I am only as wide as this text"}
}

// Fixed: exact pixel size
View{
    width: 300 height: 200
    Label{text: "I am exactly 300x200 pixels"}
}

// Constrained Fill: fills but within bounds
View{
    width: Fill{min: 200 max: 600} height: Fit
    flow: Down padding: 16
    Label{text: "I fill available space but stay between 200-600px"}
}

CRITICAL: height: Fit on Containers

This is the number one layout bug in Makepad.

The default height is Fill. When your output renders inside a Fit container, Fill inside Fit creates a circular dependency and resolves to 0 pixels. Your entire UI becomes invisible.