UIGridLayout

UIGridLayout : UIGridStyleLayout

Overview

A layout that can be used to automatically place sibling UI elements in multiple rows within their parent UI area. If all the elements cannot fit in their parent’s available space as a single column, the leftovers are placed in the next column.

UIGridLayout can be controlled only in client environment.

Properties

CellPadding

UDim2

Specifies the margin among UI elements placed in grid with UDim2.

Code Samples

local ScreenGui = script.Parent
local Frame = ScreenGui:WaitForChild("Frame")
local UIGridLayout = Frame:WaitForChild("UIGridLayout")

UIGridLayout.CellPadding = UDim2.new(0, 10, 0, 10)

CellSize

UDim2

Specifies the size of every UI element placed in grid with UDim2.

Code Samples

local ScreenGui = script.Parent
local Frame = ScreenGui:WaitForChild("Frame")
local UIGridLayout = Frame:WaitForChild("UIGridLayout")

UIGridLayout.CellSize = UDim2.new(0, 150, 0, 100)

FillDirectionMaxCells

number

Determines how many cells are filled in a single row before line break is needed in grid.

It works as “number of cells allowed in a single row” or “number of cells allowed in a single column” depending on FillDirection. The higher this value, the more elements can be placed in a single row or column.

Default is 0, which means elements will be filled in their parent container space as long as it allows and there is no line break limitation.

Code Samples

local ScreenGui = script.Parent
local Frame = ScreenGui:WaitForChild("Frame")
local UIGridLayout = Frame:WaitForChild("UIGridLayout")

UIGridLayout.FillDirectionMaxCells = 2

Methods

Events

See also