UiListLayouts automatically place labels. (UI-something-something) You will need to scale the frame the labels are being placed in to get 5 in a row though.
Would I do this through script? My whole GUI is controlled by this script:
local IndexMenu = script.Parent
local Collected = IndexMenu:WaitForChild("Collected")
local ScrollingFrame = IndexMenu:WaitForChild("ScrollingFrame")
local UIGridLayout = ScrollingFrame:WaitForChild("UIGridLayout")
local info = IndexMenu:WaitForChild("Info")
local Player = game.Players.LocalPlayer
local MemesCollected = Player:WaitForChild("MemesCollected", 5)
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Memes = ReplicatedStorage:WaitForChild("Memes")
local difficultyColors = { --Possible difficulties: Impossible
Color3.fromHex("#00ff00"), -- Easy, Green
Color3.fromHex("#ffaa00"), -- Medium, Orange
Color3.fromHex("#ff0000"), -- Hard, Red
Color3.fromHex("#00ffff"), -- Extreme, Cyan
Color3.fromHex("#aa00ff"), -- Insane, Purple
Color3.fromHex("#ff00ff"), -- Cringe, Pink
Color3.fromHex("#ff555f"), -- Troll, Salmon
Color3.fromHex("#1a191a"), -- Mystery, Black
}
local difficulties = {
"Easy",
"Medium",
"Hard",
"Extreme",
"Insane",
"Cringe",
"Troll",
"Mystery",
}
local TotalCount = 0
for i, v in pairs(Memes:GetChildren()) do
TotalCount += 1
end
local CollectedCount = 0
for i, v in pairs(MemesCollected:GetChildren()) do
CollectedCount += 1
end
Collected.Text = CollectedCount.."/"..TotalCount.." Found"
for _, meme in pairs(Memes:GetChildren()) do
if meme and meme:IsA("BoolValue") then
local MemeName = meme.MemeName.Value
local difficulty = meme.Difficulty.Value
local hint = meme.Hint.Value
local Image = meme.Image.Texture
local DifficultyColor = meme.DifficultyColor.Value
local DifficultyLevel = meme.DifficultyLevel.Value
local ItemButton = script.TemplateButton:Clone()
ItemButton.Parent = ScrollingFrame
ItemButton.Name = MemeName
ItemButton.Image = Image
ItemButton.Difficulty.BackgroundColor3 = DifficultyColor
ItemButton.Difficulty.DifficultyLabel.Text = difficulty
ItemButton.MemeName.Text = MemeName
if MemesCollected:FindFirstChild(MemeName) then
ItemButton.Collected.BackgroundTransparency = 1
else
ItemButton.Collected.BackgroundTransparency = 0.25
end
ItemButton.LayoutOrder = DifficultyLevel
UIGridLayout.SortOrder = Enum.SortOrder.LayoutOrder
UIGridLayout:ApplyLayout()
ItemButton.MouseButton1Click:Connect(function()
info.Visible = true
info.MemeImage.Image = Image
info.Hint.Text = "Hint: ".. hint
info.MemeName.Text = MemeName
info.Difficulty.BackgroundColor3 = DifficultyColor
info.Difficulty.Text = "Difficulty: "..difficulty
end)
end
end
MemesCollected.ChildAdded:Connect(function(child)
CollectedCount += 1
Collected.Text = CollectedCount.."/"..TotalCount.." Found"
local ChildButton = ScrollingFrame:FindFirstChild(child.Name)
ChildButton.Collected.BackgroundTransparency = 1
end)
It’s possible with also using script but don’t use UIGridLayout:ApplyLayout() (deprecated), it automatically reapplies the layout when a sibling is added/removed.
I believe you could achieve what you want with UIListLayout. It used to be kinda weak, but recently it got an update and it works more like flexboxes in HTML, which are really powerful.
I believe that to achieve the effect of a grid width square items you’ll want to insert a UIListLayout and change these properties:
FillDirection = Enum.FillDirection.Horizontal (This’ll make the items stack next to each other)
Wraps = true (this’ll make the items go to the next row when they reach the end of a row)
Gap = UDim.new(scale, pixels) (I’d recommend using 0 for scale and any integer value for pixels)
HorizontalAlignment = Enum.HorizontalAlignment.Center (this’ll make the items always horizontally in the center)
Then this’ll basically work. You just need the items to have a uniform size.
If you want to have 5 next to each other with a gap of 5 pixels you’ll need all the children to have the following properties:
SizeConstraint = Enum.SizeConstraint.RelativeXX (Makes both wdith and height relative to the width of the parent)
Size = UDim2.new(0.2, -5, 0.2, -5) (we need to subtract the gap from the size, otherwise the items won’t fit on the row ) (we could use some math to make it more accurate but this’ll do)
This is how the thing could look. Try experimenting with the different properties and find out what suits your needs the best!
This is the basic hierarchy: