# UIGridStyleLayout

UIGridStyleLayout : `Instance`

## Overview

A layout-based class that can be used to automatically place UI elements in grid or list.

UIGridStyleLayout can be controlled only in **client environment**.

## Properties

### AbsoluteContentSize

`Vector2`

A read-only property that represents the entire space the internal elements of layout actually occupy; it means actual size including spacing among elements (Padding).

#### Code Samples

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

print(UIListLayout.AbsoluteContentSize)
```

### FillDirection

`Enum.FillDirection`

Specifies the default axis on which UI elements are listed.

If Horizontal, elements are listed from left to right; if Vertical, elements are listed from top to bottom.

If elements need to be listed in reverse order, FillDirection alone is not enough. A LayoutOrder-based sorting must be used to reverse element order.

#### Code Samples

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

UIListLayout.FillDirection = Enum.FillDirection.Horizontal
```

### HorizontalAlignment

`Enum.HorizontalAlignment`

A property that determines on which reference point UI elements should be placed horizontally within their parent container.

Similar to horizontal alignment of text (TextXAlignment), user can specify how element bundles should be aligned: Left, center, and right.

#### Code Samples

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

UIListLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
```

### SortOrder

`Enum.SortOrder`

Specifies in what order layout lists multiple UI elements on screen.

LayoutOrder places each element based on their LayoutOrder, from smallest to the biggest. If there are elements with a same value, the one that was added to its parent before others did is placed first.

Name sorts and places the Name value of each element, in the order of characters, numbers, and combinations thereof.

#### Code Samples

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

UIListLayout.SortOrder = Enum.SortOrder.LayoutOrder
```

### VerticalAlignment

`Enum.VerticalAlignment`

A property that determines on which reference point UI elements should be placed vertically within their parent container.

Similar to vertical alignment of text (TextYAlignment), user can specify how element bundles should be aligned: Top, center, and bottom.

#### Code Samples

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

UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
```

## 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/uigridstylelayout.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.