UIGridLayout, How to get rid of gaps

How do I get rid of the Gap for different devices?

https://gyazo.com/cb99bd6ea9e34cff55ab93cabbdf6f26

Set Up:

image

What I want to achieve:


CanvasSize will be set to the value of Absolute content size from UIGridLayout

2 Likes

What do you mean for “gaps”? Do you mean those pictures are too big for mobile devices?

1 Like

yeah that’s what I meant,

filling negative space

1 Like

Use Scale Rather than Offset or a combination of both.

Its too big because its set to be 125x125 px and mobile screens are smaller so 125px is a larger portionof the screen.

Scale makes the Images a fraction of the screens size on all devices.

Scale is based off of Canvas.Size and as a result of using Absolute content size from UIGridLayout

Have a UIAspectRatio Constraint in the images to make them always square

You can use a script to adjust the CellSize if the gui size is changed so those space can be covered
For example:

local CellSizeX = UIGridLayout.CellSize.X.Offset
local CellPaddingX = UIGridLayout.CellPadding.X.Offset
function Resize()
local ScreenAbsX = ScrollingGUI.AbsoluteSize.X
if ScreenAbsX <= CellSizeX then --check if it is ok to resize.
return
end
local AfterResizedX = ScreenAbsX / math.floor(ScreenAbsX / (CellSizeX + CellPaddingX)) - CellPaddingX
UIGridLayout.CellSize = UDim2.new(0, AfterResizedX, 0, AfterResizedX )
end
Resize()
ScrollingGUI:GetPropertyChangedSignal("AbsoluteSize"):connect(Resize) --Resize again when the screen size is changed

I type these in my phone, hope there is no errors.

3 Likes

Another unwanted weird result:

YES!! :clap:

This works perfectly Thank You! :+1:

2 Likes