How to center lists of frames using UIGridLayout?

Help and Feedback Art Design Support
#1

  1. What do you want to achieve?
    I want to use UIGridLayout to create a uniform style with equal paddings.

  2. What is the issue?
    I am unsure how I should approach this to achieve what I want to achieve. I have provided a screenshot below showing what I have done vs what I wanted to look like by sketching the solution.
    image

  3. What solutions have you tried so far?
    I have tried to search for a similar problem to what I am, but either I am not looking deep enough or I am asking the wrong questions. I have only used UIGridLayout to get where the black boxes are at, but I want to achieve the red boxes that I have sketched

1 Like
#2

UIGridLayout has no exact functionality to mimic equal distancing of grids based on your description. You can still try to use the HorizontalAlignment to “Center”. Otherwise, try:

If your UI will have a fixed size (does not change by any means including window size changing), you can run this:

local AbsoluteWidth = 771 local ElementsPerRow = 4 local HorizontalPadding = 10 print(math.round((AbsoluteWidth - (HorizontalPadding * (ElementsPerRow - 1))) / ElementsPerRow))

This code will give you a number that will say how wide your grid size should be. Set the AbsoluteWidth to your grid frame’s AbsoluteSize.X, then the ElementsPerRow should be the number of rows you want and HorizontalPadding for how much you want to distance your UI. Run this in the Command Bar.

After running, check your Output window and see if you find a number. Copy that, and paste it on your CellSize.X (offset, or [0, place number here, 0, 0]).

1 Like
#3

Thanks for your input, I did decide to leave it as HorizontalAlignment to Center since it won’t probably bother me too much in terms of organization. Doesn’t exactly solve my original probably, but it’s better than nothing :+1:

1 Like
#4

WAIT, it turns out HorizontalAlignment solved the problem I was looking for. For some reason, I thought the boxes would fill from the middle, but I got it to fill the way I wanted it to fill. Thanks again LOL

image

1 Like
#5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.