How to arrange content on the page using columns, rows, grids, sections, and other layout primitives.

Layout Components

These control where things go on the page. Most of the time you'll use section, row, grid, and column.

column / col

Stacks children vertically with a gap between them.

column:
    heading "Title"
    text "Paragraph"
    button "Click"

Places children side by side. Wraps on small screens.

row:
    button "Save" [variant=solid]
    button "Cancel" [variant=outline]

Responsive grid. Set the number of columns with cols.

grid [cols=3]:
    card:
        text "One"
    card:
        text "Two"
    card:
        text "Three"

Attribute	Values	Default
`cols`	1 through 6	3

On mobile, grids automatically collapse to fewer columns.

Centers its children horizontally.

center:
    button "Centered Button"

A max-width wrapper with horizontal padding. Useful if you need to constrain content width inside a full-bleed layout.

container:
    heading "Contained Content"

The main building block for page sections. Has a max-width, vertical padding, and horizontal padding built in. You'll use this a lot.

section:
    heading "My Section"
    text "Content goes here."

Adds vertical whitespace. Pass a number 1 through 5 to control the size.

spacer "2"

A horizontal line. Good for separating content blocks.

divider

A flex container that wraps its children. Like row but explicitly wrapping.

wrap:
    badge "One"
    badge "Two"
    badge "Three"