Layouts

How to Use UIListLayout in Roblox

UIListLayout is the Roblox layout object that automatically stacks a Frame's children in a vertical list or horizontal row. Instead of positioning every button by hand, you drop one UIListLayout into a container and the children arrange themselves. This guide covers the properties that matter and a complete example.

Open the Settings template →

1. Add it to a container

UIListLayout is a child of the container it controls. The moment it's parented, every sibling Frame, button or label gets arranged.

local layout = Instance.new("UIListLayout")
layout.Parent = containerFrame

2. Direction, padding and alignment

FillDirection picks vertical or horizontal. Padding sets the gap between children. HorizontalAlignment and VerticalAlignment position the whole stack within the container.

layout.FillDirection = Enum.FillDirection.Vertical
layout.Padding = UDim.new(0, 12)
layout.HorizontalAlignment = Enum.HorizontalAlignment.Center
layout.VerticalAlignment = Enum.VerticalAlignment.Top

3. Control order with SortOrder

By default children sort by their layout order, then name. Set SortOrder to LayoutOrder and give each child a LayoutOrder number to control the exact sequence.

layout.SortOrder = Enum.SortOrder.LayoutOrder
firstButton.LayoutOrder = 1
secondButton.LayoutOrder = 2

Tip: Pair UIListLayout with a UIPadding on the same container to inset the whole stack from the edges — no per-child margins needed.

FAQ

Does UIListLayout work horizontally too?

Yes — set FillDirection = Enum.FillDirection.Horizontal and the children arrange left to right (or right to left depending on alignment).

Why aren't my children spacing apart?

Set the layout's Padding to a UDim value like UDim.new(0, 10). Without it, children touch edge to edge.