Two modes determined by which attrs are present. Track grid (columns/rows): parent declares track sizes, children place themselves. Unit grid: fixed coordinate canvas.

grid

tagtrack & unit grid

Two modes determined by which attrs are present. Track grid (columns/rows): parent declares track sizes, children place themselves. Unit grid: fixed coordinate canvas.

A grid range fills the spanned tracks (no w/h needed). A single value hugs content.

AttrTypeDescription
columnsnumber
rowsnumber
col-gapnumber | string
row-gapnumber | string
hnumber | 'fill'Absent = hug children
fillfill
namestring
xnumber
ynumber
wnumber | 'fill'Absent = hug children
pstring | numberPadding shorthand. Single value, "v h", or "top right bottom left". Alias: padding
ptnumberTop padding override
prnumberRight padding override
pbnumberBottom padding override
plnumberLeft padding override
fill-stylestring
effect-stylestring
radiusnumber | string
corner-smoothingnumber
borderstring
border-colorcolor | token
border-widthnumber
border-stylesolid dashed dotted
border-aligncenter inside outside
shadowstring
clipboolean
clip-pathstring
overflow-xhidden visible scroll auto
overflow-yhidden visible scroll auto
border-imagestring
outlinestring
outline-offsetnumber

Inherited properties

AttrType / valuesNotes
opacitynumberLayer opacity, 0–1. Omitted when 1.
blendnormal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, linear-burn, linear-dodgeBlend mode against layers below. Omitted when normal.
maskbooleanPresence = true. Acts as an alpha mask for subsequent siblings.
rotationnumberRotation in degrees. Omitted when 0.
constraint-hleft, right, center, scale, stretchHorizontal pin/resize behavior. Default left (omitted).
constraint-vcenter, scale, stretch, top, bottomVertical pin/resize behavior. Default top (omitted).
absbooleanAbsolute child inside auto-layout. Presence = true. Replaces layout-position="absolute".
min-widthnumberMinimum width in px. Omitted when unset.
max-widthnumberMaximum width in px. Omitted when unset.
min-heightnumberMinimum height in px. Omitted when unset.
max-heightnumberMaximum height in px. Omitted when unset.
fliph, v, bothMirror transform — 'h', 'v', or 'both'.
filterstringCSS filter string, e.g. "brightness(1.2) contrast(0.9)".
isolationbooleanPresence = true. New stacking context for blend modes (isolation: isolate).
transform-originstringTransform origin, e.g. "top-left", "center", "0% 0%".
scale-xnumberCSS scaleX, e.g. 1.5.
scale-ynumberCSS scaleY, e.g. 0.8.
skew-xnumberHorizontal skew in degrees.
skew-ynumberVertical skew in degrees.
aspect-ratiostringAspect ratio, e.g. "16/9", "1/1".
z-indexnumberExplicit CSS z-index.
visiblebooleanfalse = visibility:hidden (preserved in file, skipped in render).

Track grid — dashboard layout

<grid columns="200 1fr" rows="56 1fr" gap="0" w="fill" h="fill">
  <row gc="1/-1" gr="1" fill="#fff" p="0 20" align="middle-left">
    <text value="Dashboard" font-size="17" font-weight="600" />
  </row>
  <col gc="1" gr="2" fill="#f7f7f7" p="12" gap="4">...</col>
  <col gc="2" gr="2" p="32" gap="16">...</col>
</grid>