UIListLayout is the Roblox layout object that automatically stacks a Frame's children into a vertical list or horizontal row. Instead of hand-positioning every button, you parent one UIListLayout to the container and the children arrange themselves — add one, remove one, reorder them, and the stack updates instantly. This guide covers every property that matters, then the three things that trip people up next: sorting with LayoutOrder, sizing containers to the stack with AbsoluteContentSize, and how position overrides work when the layout ignores a child's Position. Full Luau examples throughout, ending with a complete settings menu you can paste straight into Studio.
1. What UIListLayout does
UIListLayout is a layout object, not a visible element: it has no size or color of its own. Parent it to any container — a Frame, a ScrollingFrame, a panel — and from that moment the container's children are arranged for you. Children keep their own Size; the layout only takes over their Position, stacking them top-to-bottom (or left-to-right) in sort order. New children are slotted in the instant they're parented, so you can build rows in a loop and never set a Position.
The one rule to remember: one layout per container, and the layout must be a child of the container it controls. Siblings of the layout — Frames, buttons, labels — get arranged. Elements inside those Frames do not; a layout only controls its direct siblings.
Why bother instead of positioning children by hand? Because a hand-built list is a maintenance trap: every Position is a number you must recalculate when you insert a row, change a height, or resize for mobile. A UIListLayout is one object doing that math forever — which is why nearly every shipped Roblox menu, shop and leaderboard panel uses one.
2. Direction, padding and alignment
Three properties shape the stack. FillDirection picks the axis: Enum.FillDirection.Vertical stacks children top to bottom, Horizontal goes left to right. Padding is a UDim whose offset part sets the pixel gap between children — UDim.new(0, 12) leaves 12 pixels between every element. HorizontalAlignment and VerticalAlignment position the whole stack inside the container, so a vertical list can sit centered, left- or right-aligned without touching the children.
Alignment applies to the stack as a whole, not to individual children. If you want one group of buttons centered and another left-aligned, that's two containers with two layouts — each with its own alignment settings.
Tip: Pair UIListLayout with a UIPadding on the same container to inset the whole stack from the panel's edges — spacing that applies to the group, not to each child.