How can I drop my content down a line when theres certain amount of labels inserted?

So I’ve made this really cool system where you press a button and its content slides down to you revealing your weapon choices.

I’ve thought as well instead of making it a giant list or a big vertical line to have it 2 weapons per line.
What I’m trying to achieve here is when the system detects that theres 3 of these, the 3rd one gets carried over to the next line and as well expand the frame down a bit.

image

What do you mean… exaaaactly? Could you make a drawing?

Look into UIGridLayout. It will automatically put new tiles onto the next line, but each tile must have the same size (you set the size inside the UIGridLayout properties).

Also, in terms of expanding just count how many children there are that are TextButton instances (I think that’s what you are using).

local GridFrame = -- path to the frame containing the grid

function countChildren(frame)
    return #frame:GetChildren() - 1 -- subtract one since UIGridLayout will be counted
end

GridFrame.ChildAdded:Connect(function()
    if countChildren(GridFrame) % 2 == 1 then
        GridFrame:TweenSize() -- add size
    end
end)

GridFrame.ChildRemoving:Connect(function()
    if countChildren(GridFrame) % 2 == 0 then
        GridFrame:TweenSize() -- remove size
    end
end)

What this does is every time a child is added and it finds an odd number of tiles, it adds whatever size you want. If a child is removed and there is now an even number, remove size. This isn’t a perfect or complete solution, just an idea for how it might be done.