<row> is horizontal, <col> is vertical. <stack> requires an explicit direction. Children are flow-positioned.

stack

tagauto-layout

<row> is horizontal, <col> is vertical. <stack> requires an explicit direction. Children are flow-positioned.

w / h absent = hug content; "fill" = fill parent; number = fixed px. p accepts CSS shorthand (1–4 values). gap="auto" distributes space evenly.

Attr	Type	Description
`name`	`string`
`direction` required	`horizontal` `vertical` `grid`
`x`	`number`
`y`	`number`
`w`	`number \| 'fill'`	Absent = hug children
`h`	`number \| 'fill'`	Absent = hug children
`gap`	`gap`	Gap between items and (when wrapping) between rows. "16" fixed 16px "auto" space-between (bare attribute = auto) "16 10" 16px items, 10px rows "16 auto" 16px items, rows distributed
`reverse-z`	`boolean`	Reverse z-order of children. Presence = true.
`wrap`	`boolean`	Enable wrapping. Presence = true.
`grid-columns`	`number`
`grid-rows`	`number`
`grid-col-gap`	`number \| string`
`grid-row-gap`	`number \| string`
`p`	`string \| number`	Padding shorthand. Single value, "v h", or "top right bottom left". Alias: padding
`pt`	`number`	Top padding override
`pr`	`number`	Right padding override
`pb`	`number`	Bottom padding override
`pl`	`number`	Left padding override
`align`	`stretch` `top-left` `top-center` `top-right` `middle-left` `middle-center` `middle-right` `bottom-left` `bottom-center` `bottom-right` `baseline`	9-point alignment — direction-independent. Replaces justify + align. Special values: stretch, baseline. Default: top-left.
`fill`	`fill`
`fill-style`	`string`
`effect-style`	`string`
`radius`	`number \| string`
`corner-smoothing`	`number`
`border`	`string`
`border-color`	`color \| token`
`border-width`	`number`
`border-style`	`solid` `dashed` `dotted`
`border-align`	`center` `inside` `outside`
`shadow`	`string`
`clip`	`boolean`
`clip-path`	`string`
`overflow-x`	`hidden` `visible` `scroll` `auto`
`overflow-y`	`hidden` `visible` `scroll` `auto`
`border-image`	`string`
`outline`	`string`
`outline-offset`	`number`

Inherited properties

Attr	Type / values	Notes
opacity	number	Layer opacity, 0–1. Omitted when 1.
blend	normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, linear-burn, linear-dodge	Blend mode against layers below. Omitted when normal.
mask	boolean	Presence = true. Acts as an alpha mask for subsequent siblings.
rotation	number	Rotation in degrees. Omitted when 0.
constraint-h	left, right, center, scale, stretch	Horizontal pin/resize behavior. Default left (omitted).
constraint-v	center, scale, stretch, top, bottom	Vertical pin/resize behavior. Default top (omitted).
abs	boolean	Absolute child inside auto-layout. Presence = true. Replaces layout-position="absolute".
min-width	number	Minimum width in px. Omitted when unset.
max-width	number	Maximum width in px. Omitted when unset.
min-height	number	Minimum height in px. Omitted when unset.
max-height	number	Maximum height in px. Omitted when unset.
flip	h, v, both	Mirror transform — 'h', 'v', or 'both'.
filter	string	CSS filter string, e.g. "brightness(1.2) contrast(0.9)".
isolation	boolean	Presence = true. New stacking context for blend modes (isolation: isolate).
transform-origin	string	Transform origin, e.g. "top-left", "center", "0% 0%".
scale-x	number	CSS scaleX, e.g. 1.5.
scale-y	number	CSS scaleY, e.g. 0.8.
skew-x	number	Horizontal skew in degrees.
skew-y	number	Vertical skew in degrees.
aspect-ratio	string	Aspect ratio, e.g. "16/9", "1/1".
z-index	number	Explicit CSS z-index.
visible	boolean	false = visibility:hidden (preserved in file, skipped in render).

Example

<col w="fill" gap="12" p="16" fill="#fff" radius="12">
  <text value="Settings" font-size="17" font-weight="600" fill="#1C1C1E" />
  <line fill="#E5E5EA" />
  <row w="fill" gap="auto" align="middle-left">
    <text value="Notifications" font-size="15" fill="#1C1C1E" />
    <text value="On" font-size="15" fill="#8E8E93" />
  </row>
</col>