makepad-2.0-layout

Implements Makepad 2.0 layout system using Walk sizing, Flow arrangement, and alignment rules.

747|87|Updated Jan 10, 2026
One-click install
npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-layout
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: makepad-2.0-layout
Source: https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/makepad-2.0-layout
Command: npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Makepad 2.0 uses a layout turtle system that differs fundamentally from CSS flexbox and grid, causing common bugs like invisible UIs from missing height: Fit, clipped text from misused Filler widgets, and non-scrolling views from incorrect viewport sizing.

Core Features & Use Cases

  • Walk Sizing System: Configure widget dimensions with Fill, Fit, fixed pixels, and constrained variants like Fill{min: 100 max: 500}.
  • Flow Layout & Alignment: Arrange children with flow: Down, flow: Right, flow: Overlay, wrapping flows, spacing, padding, and Align positioning.
  • Scrollable Containers & Patterns: Use ScrollYView, ScrollXView, and ScrollXYView correctly, plus ready-made patterns for sidebars, card grids, dialogs, and header/body/footer layouts.
  • Use Case: When building a Makepad app page with a fixed header, scrollable list body, and footer, this Skill provides the exact Splash syntax and sizing rules so the layout renders correctly on the first attempt.

Quick Start

Use the makepad-2.0-layout skill to build a vertical page layout with a fixed header, scrollable body, and footer in Makepad 2.0 Splash syntax.

Frequently Asked Questions about makepad-2.0-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a vertical layout in Makepad 2.0?

Use a View with `flow: Down` to stack children vertically, combined with `spacing` for gaps and `padding` for inner margins. Always set `height: Fit` on the container so it shrinks to its content instead of resolving to zero pixels.

Why is my Makepad UI invisible or rendering at 0px height?

The container is missing `height: Fit`. The default height is Fill, and Fill inside a Fit parent creates a circular dependency that resolves to 0 pixels. Add `height: Fit` to every View, SolidView, and RoundedView unless the parent has a fixed or Fill height.

What is the difference between Fill and Fit in Makepad sizing?

Fill makes a widget take all remaining space in its parent, while Fit shrinks the widget to its content size. Use Fill for main content areas and root widths, and Fit for buttons, labels, cards, and most containers.

Why is my Makepad ScrollYView not scrolling?

ScrollYView must use `height: Fill`, not `height: Fit`. With Fit it expands to fit all content, leaving nothing to scroll. Fill gives it a fixed viewport within which the content scrolls.

Why is text hidden behind a colored background in Makepad?

Containers with a background (SolidView, RoundedView) need `new_batch: true` when they contain text children. Without it, GPU draw call batching renders the text behind the background.

When should I avoid using Filler in Makepad layouts?

Never place Filler next to a `width: Fill` sibling, because both compete for remaining space and split it 50/50, clipping text. Use Filler only between `width: Fit` siblings, or give the text element `width: Fill` to push others aside naturally.