# 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

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

## Methods

## Events

## See also


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.overdare.com/development/api-reference/classes/uigridlayout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.