Frame

The one container. Structure is turned on by naming it: none, stack, or grid.

With layout none, children sit exactly where their own position says: free placement. With stack, children flow along one axis as a row or column. With grid, they flow into columns. Every other container you see is a frame dressed with fill, border, and radius.

Properties

• Layout: none (free placement, the ground state), stack, or grid.
• Direction: stack: row or column.
• Gap: stack and grid: space between children, in pixels.
• Align: stack: cross-axis alignment. Start, center, end, or stretch. Omit for the axis default: a row centers, a column stretches.
• Distribute: stack: how children spread along the axis. Start, center, end, space-between, space-around, space-evenly. Omit and the gap rules.
• Wrap: stack: children wrap to the next line when they run out of room.
• Padding: inner space, in pixels.
• Columns: grid: column count.
• Masonry: grid: children flow into balanced columns keeping their own heights.
• Rows: grid: explicit row count. Omit for as many as content needs.
• Column widths: grid: each column in order. Pixel numbers, percentages, fractions like 2fr, or auto. Omit for equal columns.
• Row heights: grid: same words as column widths.
• Tag: the real HTML element the frame publishes as: div, section, article, nav, header, footer, main, or aside.
• Pointer events: none lets clicks pass through this frame.
• Tab index: keyboard focus order. Omit for the natural order.
• Text select: off stops the words inside being selectable.

What it announces

• Clicked: the row in scope when a reader clicks this frame. A frame inside a Repeat announces its own row.