# Makepad 2.0 Layout

CRITICAL: Use for Makepad 2.0 layout system.

- Repository: https://github.com/ZhangHanDong/makepad-skills (752 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-04-07
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -g -a claude-code -y`
Codex: `npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -g -a codex -y`
Cursor: `npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -g -a cursor -y`
Gemini CLI: `npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ZhangHanDong/makepad-skills`

## Description

CRITICAL: Use for Makepad 2.0 layout system. Triggers on: makepad layout, makepad width, makepad height, makepad flex, makepad flow, makepad padding, makepad margin, makepad spacing, makepad align, makepad sizing, Fill, Fit, Inset, Flow.Down, Flow.Right, ScrollXView, ScrollYView, 布局, 对齐, 间距, 填充, 排版, 滚动视图, 尺寸, 宽度, 高度

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

The rest: https://github.com/ZhangHanDong/makepad-skills/blob/HEAD/skills/makepad-2.0-layout/SKILL.md