# 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