Row & Column

Row and Column are flexbox-style layouts. A Row arranges children left-to-right; a Column arranges them top-to-bottom. They’re the most common layouts you’ll use.

The mental model

Each container has a main axis and a cross axis:

Container	Main axis	Cross axis
Row	Horizontal	Vertical
Column	Vertical	Horizontal

Children flow along the main axis with Gap between them, then position on the cross axis according to CrossAlign. Extra main-axis space is distributed by MainDistribute.

Basic Row

AutoUI.Create()
    .Row()
    .WidthFill().HeightHug()
    .Gap(8).Padding(12)
    .Children(
        AutoUI.Create().Text("Left"),
        AutoUI.Create().WidthFill(),         // spacer pushes everything after it right
        AutoUI.Create().Text("Right")
    )
    .Build();

A WidthFill() element with no other content is the canonical “spacer.” Insert it between siblings to push them apart.

Basic Column

AutoUI.Create()
    .Column()
    .WidthFill().HeightFill()
    .Gap(12).Padding(16)
    .Children(
        AutoUI.Create().Row().HeightHug().Children(...),     // header row
        AutoUI.Create().WidthFill().HeightFill(),            // body fills remaining space
        AutoUI.Create().Row().HeightHug().Children(...)      // footer row
    )
    .Build();

Three vertically stacked sections — header (Hug height), body (Fill), footer (Hug). The body absorbs all extra vertical space.

Alignment

MainAlign and CrossAlign set how the whole content block sits within the container:

Value	Effect
Start	Pinned to the start (left for Row, top for Column)
Center	Centered
End	Pinned to the end
Stretch	(Cross only) Children grow to fill the cross axis

AutoUI.Create()
    .Row().WidthFill().Height(60)
    .MainAlign(Alignment.Center)         // children clustered horizontally in the middle
    .CrossAlign(Alignment.Center)        // children vertically centered
    .Children(
        AutoUI.Create().Text("Centered horizontally and vertically")
    )
    .Build();

Center() is a shorthand for .MainAlign(Center).CrossAlign(Center).

Per-child cross alignment

Override the parent’s CrossAlign for a single child:

AutoUI.Create().Row().HeightHug().CrossAlign(Alignment.Start)
    .Children(
        AutoUI.Create().Text("Top-aligned"),
        AutoUI.Create().Text("Override").CrossAxisSelfAlign(GridAlignment.End),
        AutoUI.Create().Text("Top-aligned again")
    )
    .Build();

Distribution

When children don’t fill the main axis, MainDistribute decides how the gap is spread:

Value	Effect
Packed (default)	Children clustered, gap is Gap literal
SpaceBetween	Equal gaps between children, no edges
SpaceAround	Equal gaps including half-gaps at edges
SpaceEvenly	Equal gaps including full-gaps at edges

AutoUI.Create().Row().WidthFill()
    .MainDistribute(Distribution.SpaceBetween)
    .Children(
        AutoUI.Create().Text("A"),
        AutoUI.Create().Text("B"),
        AutoUI.Create().Text("C")
    )
    .Build();

A and C pin to the edges; B sits in the middle. No WidthFill spacers needed.

Wrap

Set .Wrap() on a Row or Column to let children flow onto new lines when they overflow the main axis. Wrap is the third “layout type” people often expect — it’s a Row/Column with Wrap = true.

AutoUI.Create().Row().WidthFill().HeightHug()
    .Wrap()
    .Gap(8).WrapGap(8)               // WrapGap sets cross-axis gap between wrap lines
    .Children(
        AutoUI.Create().Width(120).Height(80),
        AutoUI.Create().Width(120).Height(80),
        AutoUI.Create().Width(120).Height(80),
        AutoUI.Create().Width(120).Height(80)
    )
    .Build();

WrapGap defaults to -1 (use the same value as Gap). Set it explicitly to give wrap lines a different cross-axis spacing.

A wrapped Column flows children top-to-bottom, then wraps into new columns. (Less common but supported.)

Reverse children

Flip the visual order of children without changing alignment semantics. Row + ReverseChildren = right-to-left iteration; Alignment.Start still means “the start of the main axis” (which is the left edge).

AutoUI.Create().Row().ReverseChildren()
    .Children(a, b, c)              // renders as c, b, a
    .Build();

RTL (right-to-left)

Direction(LayoutDirection.RightToLeft) (or shorthand RTL()) flips Row/Wrap visually right-to-left, AND remaps Alignment.Start to the right edge. This is the correct way to support Arabic/Hebrew layouts. Inherits down the tree.

AutoUI.Create().Row().RTL()
    .Children(...)
    .Build();

Direction and ReverseChildren are orthogonal — they can be combined.

Common patterns

Toolbar (left + right)

AutoUI.Create().Row().WidthFill().HeightHug().Padding(8).Gap(4)
    .Children(
        AutoUI.Create().Text("Brand"),
        AutoUI.Create().WidthFill(),                // spacer
        AutoUI.Create().Button("Login", OnLogin),
        AutoUI.Create().Button("Sign up", OnSignup)
    )
    .Build();

Page shell (header / body / footer)

AutoUI.Create().Column().WidthFill().HeightFill()
    .Children(
        AutoUI.Create().Row().HeightHug().Padding(12).Background(Color.gray)
            .Children(AutoUI.Create().Text("Header")),
        AutoUI.Create().WidthFill().HeightFill().Padding(16)
            .Children(AutoUI.Create().Text("Body")),
        AutoUI.Create().Row().HeightHug().Padding(12).Background(Color.gray)
            .Children(AutoUI.Create().Text("Footer"))
    )
    .Build();

Card grid (wrapped row of cards)

AutoUI.Create().Row().WidthFill().HeightHug()
    .Wrap().Gap(12).WrapGap(12)
    .Each(items, item =>
        AutoUI.Create().Width(200).HeightHug()
            .Background(Color.gray).Padding(12)
            .Children(AutoUI.Create().Text(item.Title)))
    .Build();

For dense, performant grids of many items, prefer the GridView virtualized component.

Related

• Sizing — Fill/Hug behavior in flex layouts
• Alignment — distribution and cross-axis alignment in depth
• Grid — when you need true 2D grid layout instead of wrapping flex
• AutoUI — builder reference