How to create a grid ui without using the GridLayout

Help and Feedback Art Design Support
#1

Problem I am having with the GridLayout is that it requires a size. I have a UIAspectRatioConstraint inside the items, and that’s what keeps the items to be square. But with GridLayout you can’t do that (unless I use Offset, but that’s a big no!)

Used a ListLayout to show what I am trying to do.

image
image1366×768 287 KB

I’ve tried with GridLayout, but it seems impossible. Unless there is a way to have the UIAspectRatioConstraint overide the GridLayouts size

Using GridLayout

image
image1366×768 261 KB

With the X in CellPadding being (0, 0) yet there’s still this massive gap between each button

#2

I don’t believe there is any functionality to do this without wrapping your buttons in Frames. It’ll clutter up your explorer window a bit, but if you put the buttons inside invisible frames you should be able to do this.

On another note:

I don’t understand why people say this, Offset is hugely useful, if you use it correctly. The reason most people advocate for Scale is so that your UI works across devices, but you can definitely still use Offset where appropriate (especially useful when working with the absolute sizes of UI objects in scripts, for example)

1 Like
#3

Reason to not use Offset is because it’s near impossible to make things sized correctly. Something that’s really big on mobile will look miniscule on a 80-90" TV screen for console.

#4

I already acknowledged this point, and I agree, but it’s not like illegal or something ;p

Just make sure it works across different form factors, possibly with aid from Lua. I do this all the time to help me make responsive ui :smiley:

#5

Yep, to keep them square you need an invisible frame (what I have found)

I also chuck all my grids in a scrolling frame so that I can use offset instead, but still have the window scale.

#6

CellPadding can be negative

Aren’t you making a Gamepass UI?

You’ll have a set number of Gamepasses why do you need to use a UIConstraint Instance to help with Displaying them?

#7

Yea ik, but every game I make has UI scaled from iphone 4 - console. A lot of games lose tons of potential play sessions and robux spent because they don’t fully work on mobile/tablet and those 2 devices are probably the biggest earners in most games. If UI ain’t scaled for those, then that’s basically 2 of the biggest markets wiped out

1 Like
#8

Yep, there is a way to use the UIAspectRatioConstraint with the UIGridLayout, just parent your UIAspectRatioConstraint to your UIGridLayout and it will apply itself to all GuiObjects the UIGridLayout is managing.

Make sure your UIGridLayout is using scale instead of offset so that the icons will fit in your frame correctly and scale to screen size. I suggest only using offset for things like border pixels or small underlines.

If you’re going with 3 columns per row of icons/gamepasses, the process to make your UI would be something like the following:

Step 1) Determine size.

Leaving 10% for room, your size would be 30% ((1-.1)/3 = 0.3).

Step 2) Make sure your UIGridLayout has its FillDirectionMaxCells set to 3 (or your columns per row). I suggest centering your UIGridLayout horizontally but not vertically. Play with how you’d like it centered.

Step 3) Mess with spacing as you’d like, or calculate it based on the room you left and the amount of rows you’d like. To calculate, divide your spacing by your number of columns per row plus one. We add one to accommodate the edges. In our example of 3 columns per row, there are two spaces in between the columns and two spaces between the exterior columns and the edges of your frame. In total you’ll have 4 spaces. The centering of your columns can also be impacted by your UIAspectRatio constraint being set to FitWithinMaxSize.

A mathematical example of calculating the padding for your UIGridLayout:
Spacing = .1 (10%)
Padding = 0.025 (.1/4 = 0.025, aka 2.5%)

Therefore, your X padding would be 0.025. This would center your gamepasses or icons perfectly (as long as they have vertical space).

5 Likes
#9

You can make square items using scale with a GridLayout if you use an AspectRatioConstraint.