Layout

Most of a page's layout comes down to a row of buttons, a column of links or a grid of cards. chimera has a class for each that takes its spacing from the theme.

Rows

Row lays its children out left to right and wraps them when they run out of room:

const actions = Row({ Button("Save"), Button("Discard") }):justify("end")

Grids

Grid fits as many columns as it can, each at least as wide as you ask for. Make the window narrower and the cards below will stack:

Free

One site, community support.

Pro

Ten sites and a custom domain.

Team

Unlimited sites and shared themes.

const plans = Grid({
    Card("Free", Paragraph("One site, community support.")),
    Card("Pro", Paragraph("Ten sites and a custom domain.")),
    Card("Team", Paragraph("Unlimited sites and shared themes.")),
}, "12rem")

Columns

Column stacks its children top to bottom:

ada@example.com DiscordReplies within a day.

const contact = Column({
    Link("ada@example.com", "mailto:ada@example.com"),
    Link("Discord", "https://discord.gg/example"),
    Small("Replies within a day."),
}):gap("0.25rem")

Arranging any container

Row, Column and Grid are only Divs that start out arranged. Every built-in container has the same methods: row(), column(), grid(min_width), gap(size), wrap(), align(alignment) and justify(distribution).

const bar = Footer({ Small("© 2026 Ada"), Row({ Link("Privacy", "#"), Link("Terms", "#") }) })
    :row()
    :justify("space-between")
    :align("center")

Alignments and sizes are typed like every other style: the analyzer reports justify("space-betwen") as a typo and gap("1rx") as an unknown unit.

Your own containers get the same methods when they implement Layout (see Custom components):

class Toolbar implements Component, Layout
    function tag(): string
        return "div"
    end
    function __init(self, content: Content?)
        self
            :add(content)
            :row()
            :gap("0.5rem")
    end
end