UIListLayout

Why use UIListLayout?

UIListLayout controls the arrangement of GuiObject siblings. It reduces manual position calculations and can make menus easier to update when items are added.

Try it in Roblox Studio

Create StarterGui > PracticeGui (ScreenGui) > Menu (Frame), then put this LocalScript inside Menu. Start a client to see the stacked labels.

Syntax

layout.Padding = UDim.new(0, 8)

Examples

Stack three labels with a small gap.

local menu = script.Parent
assert(menu:IsA("Frame"))
local layout = Instance.new("UIListLayout")
layout.FillDirection = Enum.FillDirection.Vertical
layout.Padding = UDim.new(0, 8)
layout.Parent = menu

for index = 1, 3 do
    local label = Instance.new("TextLabel")
    label.Size = UDim2.new(1, 0, 0, 32)
    label.Text = "Option " .. index
    label.Parent = menu
end

FillDirection.Vertical stacks sibling GuiObjects from top to bottom.
Padding creates an eight-pixel gap between them.
The loop adds three labels; the layout computes their positions inside Menu.

Best practices

Size the parent so arranged items fit or place it in a ScrollingFrame.
Use LayoutOrder when the desired order should not depend on insertion order.

Runtime & versions

Luau host; Roblox engine examples require Roblox Studio. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

Luau documentation