I’ve been trying to find something but the best I can come up with is to use the AbsoluteContentSize property of the uigridlayout. Else I have no idea how to do this as there aren’t many resources covering this.
After looking at the issue in Roblox Studio for a few minutes I quickly found the solution: CellSize.
CellSize is a property within the UIGridLayout instance that scales all objects within it’s grid.
Since it does this, you could add a local script that finds the number of icons, for example #Frame:GetChildren() – Returns the # of icons.
Then you would dynamically change CellSize from that value.
If your frame is 450 pixels wide and has 8 images sized 100x100 then there will be 2 rows. This is because 450/100 = 4.5 and 4.5 < 8. This means if we use our old friend algebra we can say 450/8 = 56.25, which perfectly fits into one row!
Making the equation: Frame Width / # of Images = CellSize
But wait, what about padding?
Well don’t worry, the equation is easy, just subtract the padding amount from the total.
Making the padded equation: (Frame Width / # of Images) - Padding Width = CellSize
As for the scripting:
local gridLayout = script.Parent
local frame = gridLayout.Parent
frame.ChildAdded:Connect(function() -- A new object is added to the frame.
local numIcons = #frame:GetChildren()
local adjustedSize = (frame.Size.Offset.X / numIcons) - gridLayout.CellPadding.Offet.X -- You can use scale too: frame.Size.Scale.X / gridLayout.CellPadding.Scale.X
gridLayout.CellSize = UDim2.fromOffset(adjustedSize, adjustedSize) -- You can use scale too: UDim2.fromScale(adjustedSize, adjustedSize)
I hope this helped solve your issue,
if you still need assistance feel free to reply to this or send me a private message.