Lesson 01 of 05
Constraint-Driven Layouts
Stop hand-placing elements. Let layout objects do the work automatically.
UIListLayout is Roblox's answer to CSS flexbox. UIGridLayout handles uniform grids. UIPadding adds inner margin. Parent these to any Frame and children auto-arrange.
The power: resizing the container automatically repositions all children. No manual position math.
Sort order matters: UIListLayout sorts by LayoutOrder property by default. Set LayoutOrder on each child to control sequence.
luau
1local frame = script.Parent
2
3-- Vertical stack with centering
4local list = Instance.new('UIListLayout', frame)
5list.FillDirection = Enum.FillDirection.Vertical
6list.HorizontalAlignment = Enum.HorizontalAlignment.Center
7list.VerticalAlignment = Enum.VerticalAlignment.Top
8list.Padding = UDim.new(0, 8)
9list.SortOrder = Enum.SortOrder.LayoutOrder
10
11-- Inner padding
12local pad = Instance.new('UIPadding', frame)
13pad.PaddingTop = UDim.new(0, 16)
14pad.PaddingBottom = UDim.new(0, 16)
15pad.PaddingLeft = UDim.new(0, 12)
16pad.PaddingRight = UDim.new(0, 12)
17
18-- Auto-resize frame to fit content
19list:GetPropertyChangedSignal('AbsoluteContentSize'):Connect(function()
20 local padY = 32 -- top + bottom padding
21 frame.Size = UDim2.new(frame.Size.X.Scale, frame.Size.X.Offset,
22 0, list.AbsoluteContentSize.Y + padY)
23end)
READY · 23 lines