Skip to content
AutoLayout PRO

AutoLayout — Overview

The AutoLayout MonoBehaviour is the single component you add to UI GameObjects to participate in layout. It replaces Unity’s built-in LayoutGroup + ContentSizeFitter + LayoutElement stack.

When you add it to a Canvas-rooted RectTransform and set its Layout Type, AutoLayout takes over sizing and positioning of itself and its children. Child GameObjects with their own AutoLayout participate in the same pass; child GameObjects without one are positioned but not measured.

Property reference

The Inspector groups properties into sections. Each section has its own dedicated doc — this page is the index.

Layout type

  • None — the component participates in measurement but doesn’t arrange children. Children use absolute positioning (anchors/offsets like vanilla Unity UI).
  • Row — flexbox-style horizontal layout. See RowColumn.
  • Column — flexbox-style vertical layout. See RowColumn.
  • Grid — CSS-grid-style. See Grid.
  • Absolute — children use absolute positioning relative to this container’s content rect. Different from None: this container is itself sized normally; only the children are absolute.

Sizing

  • Width + Height — pick a sizing mode per axis: Pixels, Hug, Fill, Percentage, AspectRatio, Raw/TextSize. Full reference: Sizing.
  • MinWidth / MaxWidth / MinHeight / MaxHeight — clamp the resolved size on either axis.

Spacing

  • Padding — inset between this element’s bounds and its content area.
  • Margin — outset between this element and its siblings.
  • Gap — spacing between children in Row/Column. Set as pixels or percentage.

See Spacing for examples.

Alignment

  • Main Axis Align / Cross Axis Align — where children sit on each axis (Start, Center, End, Stretch).
  • Main Axis Distribution — how extra space is shared (Packed, SpaceBetween, SpaceAround, SpaceEvenly).
  • Cross Axis Self Align — per-child override of parent’s CrossAxisAlign.

See Alignment.

Placement

  • Normal (default) — participates in parent layout flow.
  • Absolute — anchored to parent’s content rect via Top/Bottom/Left/Right; ignored by Row/Column flow.
  • CoverParent — stretches to match parent size, ignoring padding/margin. Useful for backgrounds.
  • Ignored — sized by AutoLayout but positioned externally (used by ListView/GridView for pooled items).

Direction (RTL)

  • LeftToRight (default) / RightToLeft / Inherit — flips Row/Wrap/Grid children right-to-left and resolves Alignment.Start to the right edge. No effect on Column.

Overflow

  • Visible (default) / Hidden — Hidden adds a RectMask2D so children clip at the bounds.

Visibility

  • Visible / Hidden (invisible but takes space) / Collapsed (out of layout flow entirely).

Reverse children

A bool that flips sibling iteration order without changing alignment semantics. Row + ReverseChildren = render right-to-left while still resolving Alignment.Start to the left edge.

Layout order

An integer that overrides visual sibling order. Lower comes first; 0 = use hierarchy order. Negatives allowed.

How it computes a layout

AutoLayout runs a three-phase algorithm on the dirty subtree:

  1. Gather — adapter scans the RectTransform tree, builds an array of UINode structs.
  2. Intrinsic Sizing (bottom-up) — Hug/Raw sizes propagate up from leaves.
  3. Space Distribution + Positioning (top-down) — Fill/% sizes resolve, then positions are written to RectTransforms.

The engine tracks dirty state per node (size changes, position changes, child changes, layout settings changes) and rebuilds only what’s affected. A change to a leaf node’s size doesn’t recompute the entire tree.

For most users the only thing that matters is: set sizing modes correctly and the engine handles the rest. The engine never modifies anchors or pivots — they’re set once at GameObject creation (always (0, 1) for AutoLayout-managed elements).

Common gotchas

  • Anchors must be (0, 1) at creation time. The AutoUI builder handles this automatically. Manual new GameObject + AddComponent<RectTransform> setup must set anchorMin = anchorMax = pivot = new Vector2(0, 1) before adding AutoLayout.
  • Hug on a leaf with no content = 0×0. A leaf that uses Hug() measures its children to find a size — if there are no children and no Raw text/image content, the result is zero. Use TextSize() for text-only leaves, or set explicit Width/Height.
  • Mixing layout types and Placement.Absolute. An Absolute child still has a size resolved by the engine (via Width/Height or anchor stretch); it just doesn’t participate in Row/Column flow.

Code example

The same configuration as the Inspector — every property has a corresponding builder method:

AutoUI.Create()
    .Column()                         // LayoutType
    .WidthFill().HeightHug()          // Sizing
    .MinHeight(100).MaxHeight(400)    // Constraints
    .Padding(16, 12)                  // 16 horizontal, 12 vertical
    .Gap(8)
    .MainAlign(Alignment.Start)
    .CrossAlign(Alignment.Center)
    .Background(new Color(0.95f, 0.95f, 0.95f))
    .Children(
        AutoUI.Create().Text("Title", 24f),
        AutoUI.Create().Text("Body text")
    )
    .Build();