Agents & MCP

Layout and sizing

Kimo layout is flexbox, set on frames. Map CSS intuitions directly, and note the different names below.

2 min read

·

Kimo 1.0 · format 1.0

On this page4 sections

Layout frames
Sizes
Rules that prevent most layout bugs
Checking

Layout frames

"layout": {"dir":"row", "gap":12, "pad":[16,24], "justify":"between", "align":"center"}

Field	Values	Default
`dir`	`row`, `column` (required)
`gap`	number (may be negative)	0
`pad`	`n`, `[vertical, horizontal]`, `[top, right, bottom, left]`	0
`justify`	`start` `center` `end` `between` `around` `evenly`	`start`
`align`	`start` `center` `end`, plus `stretch` `baseline` (feature `layout/stretch-baseline`)	`start`
`wrap`, `crossGap`	wrap onto lines (feature `layout/wrap`)	off

dir

Values row, column (required)

Default

gap

Values number (may be negative)

Default 0

pad

Values n, [vertical, horizontal], [top, right, bottom, left]

Default 0

justify

Values start center end between around evenly

Default start

align

Values start center end, plus stretch baseline (feature layout/stretch-baseline)

Default start

wrap, crossGap

Values wrap onto lines (feature layout/wrap)

Default off

Without layout, children are placed by x/y relative to the frame's top-left. Inside a layout frame, x/y are ignored unless the child has position: "absolute" (badges, overlays). Hidden children (visible: false) take no space.

Sizes

w and h take one of:

a number: fixed px;
{"mode":"fit"}: hug the content (the default for frames);
{"mode":"fill"}: take the space of a layout parent. On the main axis it is flex: <weight> 1 0: fill siblings share the space left by the others by weight, ignoring their content (two fill texts get equal widths, as in pen.dev and Figma); in a parent that hugs that axis or wraps, the content size is the basis. On the cross axis it stretches.

fallback gives the size used when fill has no layout parent, or when fit has no children. min/max need feature size/min-max.

Rules that prevent most layout bugs

Put spacing on the container (pad, gap), not on children's x/y.
A screen-level frame gets fixed w (for example 1440 or 390) and h: {"mode":"fit"} so it grows with its content.
Full-width rows inside a column: give the child w: {"mode":"fill"}, not a pixel width.
A fit frame whose only flowing children all fill the same axis is circular (lint FIT_ALL_FILL). Give the parent a fixed size or the child a fit/fixed size.
Text that should wrap needs grow: "fixed-width" plus a width (fill inside a column works).
Use justify: "between" for "left item … right item" bars, not spacer frames.
Use clip: true on frames that must crop (cards with images, scroll areas).

Checking

kimo_query {include:["bounds"]} returns the computed boxes, and include:["problems"] returns layout lints per node. kimo_render shows the result. Check widths before you check the visuals.