> For the complete documentation index, see [llms.txt](https://docs.overdare.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.overdare.com/development/api-reference/classes/uigridlayout.md).

# 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

### AbsoluteCellCount

`Vector2`

A read-only property that indicates the number of columns (X) and rows (Y) of the cells actually placed.

#### Code Samples

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

print("AbsoluteCellCount : ", UIGridLayout.AbsoluteCellCount)
```

### AbsoluteCellSize

`Vector2`

A read-only property that indicates, in pixels, the actual size of a single cell after CellSize is applied on screen.

#### Code Samples

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

print("AbsoluteCellSize : ", UIGridLayout.AbsoluteCellSize)
```

### CellPadding

`UDim2`

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

#### Code Samples

```lua
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

```lua
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

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

UIGridLayout.FillDirectionMaxCells = 2
```

### StartCorner

`Enum.StartCorner`

Specifies the corner where the first cell is placed.

The remaining cells are filled from this corner in the FillDirection direction.

* `TopLeft`: Starts from the top left.
* `TopRight`: Starts from the top right.
* `BottomLeft`: Starts from the bottom left.
* `BottomRight`: Starts from the bottom right.

#### Code Samples

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

UIGridLayout.StartCorner = Enum.StartCorner.TopRight
```

## Methods

## Events

## See also