Source: Roblox Creator Hub · CC BY 4.0 · View source · Code samples: MIT Imported 2026-10-03. Formatting adapted for this site.
UIGridLayout
Inherits from: UIGridStyleLayout → UILayout → UIComponent → UIBase → Instance → Object
A UIGridLayout (not to be confused with the abstract UIGridStyleLayout from which this class inherits) lays out sibling UI elements in multiple rows within the parent UI element, adding elements to a row one-by-one until the next element would not fit. It then continues adding elements in the next row. A UIGridLayout will take UI elements' GuiObject.Size and GuiObject.Position under control. While under control, these UI elements' properties will not be editable in the Properties window.
By default, it lays out elements in ascending order where lower values take more priority over higher values, but this can be changed to use elements' names by changing UIListLayout.SortOrder to Name. A UIListLayout will automatically re-layout elements when elements are added/removed, or if a relevant property changes: GuiObject.LayoutOrder or Instance.Name. This can be triggered manually by calling UIGridStyleLayout:ApplyLayout(), though this is typically not necessary.
The actual cell sizes are the same for all cells. A UIGridLayout will respect UI constraints placed with it, such as UISizeConstraint and UIAspectRatioConstraint. Elements in the layout can span multiple cells if they have a UISizeConstraint with a MinSize set higher than the CellSize. It is possible to limit the number of elements per row using UIGridLayout.FillDirectionMaxCells. If set to 1, it is possible to create a single row of elements (as each element would be positioned in its own row).
This layout is appropriate when line breaks are OK after arbitrary cells. For example, a set of inventory spaces is a good use of this layout. If building a table of values in which a line break is not appropriate in the middle of tabular data, it might be a better idea to use a UITableLayout instead.
Inherits from: UIGridStyleLayout
Memory category: Instances
Properties
| Name | Type / Returns | Description |
|---|---|---|
| UIGridLayout.AbsoluteCellCount | Vector2 | The number of elements in the grid. |
| UIGridLayout.AbsoluteCellSize | Vector2 | The absolute size of each element in the grid. |
| UIGridLayout.CellPadding | UDim2 | Determines how much space there is between elements in the grid. |
| UIGridLayout.CellSize | UDim2 | Determines the size of each element in the grid. |
| UIGridLayout.FillDirectionMaxCells | int | Determines the maximum number of cells that may be used in a row or column before the next one is started. |
| UIGridLayout.StartCorner | StartCorner | Determines from which corner the grid starts laying out UI elements. |
Inherited from UIGridStyleLayout
| Name | Type / Returns | Description |
|---|---|---|
| UIGridStyleLayout.AbsoluteContentSize | Vector2 | The absolute size of space being taken up by the grid layout. |
| UIGridStyleLayout.FillDirection | FillDirection | Determines the axis in which UI objects are laid out. |
| UIGridStyleLayout.HorizontalAlignment | HorizontalAlignment | Determines the horizontal alignment of UI elements within the parent element. |
| UIGridStyleLayout.SortOrder | SortOrder | Determines the order in which child UI objects are placed in a layout. |
| UIGridStyleLayout.VerticalAlignment | VerticalAlignment | Determines the vertical alignment of UI elements within the parent element. |
Inherited from Instance
| Name | Type / Returns | Description |
|---|---|---|
| Instance.Archivable | boolean | Determines if an Instance and its descendants can be cloned using Instance:Clone(), and can be saved/published. |
| Instance.archivable | boolean | |
| Instance.Capabilities | SecurityCapabilities | The set of capabilities allowed to be used for scripts inside this container. |
| Instance.IsInSandbox | boolean | Indicates whether the instance is inside a sandboxed container. |
| Instance.Name | string | A non-unique identifier of the Instance. |
| Instance.Parent | Instance | Determines the hierarchical parent of the Instance. |
| Instance.PredictionMode | PredictionMode | Reflects the client-side prediction mode applied to the instance under server-authoritative physics. |
| Instance.RobloxLocked | boolean | A deprecated property that used to protect CoreGui objects. |
| Instance.Sandboxed | boolean | When enabled, the instance can only access abilities in its Capabilities list. |
| Instance.UniqueId | UniqueId | A unique identifier for the instance. |
Inherited from Object
| Name | Type / Returns | Description |
|---|---|---|
| Object.ClassName | string | A read-only string representing the class this Object belongs to. |
| Object.className | string |
UIGridLayout.AbsoluteCellCount
Measures the maximum number of elements in each direction. Read-only.
| Field | Value |
|---|---|
| type | Vector2 |
| tags | ["ReadOnly","NotReplicated"] |
| security | {"read":"None","write":"None"} |
| thread safety | Unsafe |
| category | Data |
| serialization | {"can_load":false,"can_save":false} |
| capabilities | ["UI"] |
UIGridLayout.AbsoluteCellSize
Provides the size of each element of the grid in offsets. Read-only. Not affected by any UIScale, UISizeConstraint or UIAspectRatioConstraint applied to any individual element in the grid.
| Field | Value |
|---|---|
| type | Vector2 |
| tags | ["ReadOnly","NotReplicated"] |
| security | {"read":"None","write":"None"} |
| thread safety | Unsafe |
| category | Data |
| serialization | {"can_load":false,"can_save":false} |
| capabilities | ["UI"] |
UIGridLayout.CellPadding
(default {0, 5},{0, 5}) Determines how much space there is between elements in the grid. As with all UDim2s, this space can be both in a percentage of the parent container's size and raw pixel offset.
| Field | Value |
|---|---|
| type | UDim2 |
| security | {"read":"None","write":"None"} |
| thread safety | ReadSafe |
| category | Appearance |
| serialization | {"can_load":true,"can_save":true} |
| capabilities | ["UI"] |
UIGridLayout.CellSize
(default {0, 100},{0, 100}) Determines the size of each element in the grid. As with all UDim2s, this size can be both in a percentage of the parent container's size and raw pixel offset. If the element being size has a UIConstraint then the size will be determined by the constraint, not the grid.
| Field | Value |
|---|---|
| type | UDim2 |
| security | {"read":"None","write":"None"} |
| thread safety | ReadSafe |
| category | Appearance |
| serialization | {"can_load":true,"can_save":true} |
| capabilities | ["UI"] |
UIGridLayout.FillDirectionMaxCells
FillDirectionMaxCells determines the number of cells in the grid that can be used before continuing on the next row/column (whether this is a row or column is dependent on UIGridStyleLayout.FillDirection). This value must be non-negative.
- If set to zero, there is no maximum number of cells that may appear in one row/column except for how many can fit within the parent UI element.
- If set to one, this creates a list similar to those created by
UIListLayout.
| Field | Value |
|---|---|
| type | int |
| security | {"read":"None","write":"None"} |
| thread safety | ReadSafe |
| category | Behavior |
| serialization | {"can_load":true,"can_save":true} |
| capabilities | ["UI"] |
UIGridLayout.StartCorner
StartCorner (StartCorner) determines from which corner the grid starts laying out UI elements. The grid continues in the UIGridStyleLayout.FillDirection, filling elements one by one until UIGridLayout.FIllDirectionMaxCells cells have been laid out in that row/column or if all the parent UI element's space has been occupied by previous cells.
Above, the potion is the first ImageLabel, followed by the gem and the sword. The UIGridLayout is using a StartCorner of BottomRight. The UIGridStyleLayout.FillDirection is Horizontal.
| Field | Value |
|---|---|
| type | StartCorner |
| security | {"read":"None","write":"None"} |
| thread safety | ReadSafe |
| category | Behavior |
| serialization | {"can_load":true,"can_save":true} |
| capabilities | ["UI"] |
Methods
Inherited from UIGridStyleLayout
| Name | Type / Returns | Description |
|---|---|---|
| UIGridStyleLayout:ApplyLayout | () | Force re-layout of sibling UI elements. |
| UIGridStyleLayout:SetCustomSortFunction | () | Sets the function used to determine the order of elements when SortOrder is set to Custom. |
Inherited from Instance
| Name | Type / Returns | Description |
|---|---|---|
| Instance:AddTag | () | Applies a tag to the instance. |
| Instance:children | Instances | Returns an array of the object's children. |
| Instance:ClearAllChildren | () | This method destroys all of an instance's children. |
| Instance:Clone | Instance | Create a copy of an instance and all its descendants, ignoring instances that are not Archivable. |
| Instance:clone | Instance | |
| Instance:Destroy | () | Sets the Instance.Parent property to nil, locks the Instance.Parent property, disconnects all connections, and calls Destroy() on all children. |
| Instance:destroy | () | |
| Instance:FindFirstAncestor | Instance? | Returns the first ancestor of the Instance whose Instance.Name is equal to the given name. |
| Instance:FindFirstAncestorOfClass | Instance? | Returns the first ancestor of the Instance whose Object.ClassName is equal to the given className. |
| Instance:FindFirstAncestorWhichIsA | Instance? | Returns the first ancestor of the Instance for whom Object:IsA() returns true for the given className. |
| Instance:FindFirstChild | Instance? | Returns the first child of the Instance found with the given name. |
| Instance:findFirstChild | Instance | |
| Instance:FindFirstChildOfClass | Instance? | Returns the first child of the Instance whose ClassName is equal to the given class name. |
| Instance:FindFirstChildWhichIsA | Instance? | Returns the first child of the Instance for whom Object:IsA() returns true for the given className. |
| Instance:FindFirstDescendant | Instance? | Returns the first descendant found with the given Instance.Name. |
| Instance:GetActor | Actor? | Returns the Actor associated with the Instance, if any. |
| Instance:GetAttribute | Variant | Returns the value which has been assigned to the given attribute name. |
| Instance:GetAttributeChangedSignal | RBXScriptSignal | Returns an event that fires when the given attribute changes. |
| Instance:GetAttributes | Dictionary | Returns a dictionary of the instance's attributes. |
| Instance:GetChildren | Instances | Returns an array containing all of the instance's children. |
| Instance:getChildren | Instances | |
| Instance:GetDebugId | string | Returns a coded string of the debug ID used internally by Roblox. |
| Instance:GetDescendants | Instances | Returns an array containing all of the descendants of the instance. |
| Instance:GetFullName | string | Returns a string describing the instance's ancestry. |
| Instance:GetStyled | Variant | Returns the styled or explicitly modified value of the specified property, or else the default property value if it hasn't been styled/modified. |
| Instance:GetStyledPropertyChangedSignal | RBXScriptSignal | Returns an event that fires when the given style property changes on the instance. |
| Instance:GetTags | Array | Gets an array of all tags applied to the instance. |
| Instance:HasTag | boolean | Check whether the instance has a given tag. |
| Instance:IsAncestorOf | boolean | Returns true if an Instance is an ancestor of the given descendant. |
| Instance:IsDescendantOf | boolean | Returns true if an Instance is a descendant of the given ancestor. |
| Instance:isDescendantOf | boolean | |
| Instance:IsPropertyModified | boolean | Returns true if the value stored in the specified property is not equal to the code-instantiated default. |
| Instance:QueryDescendants | Instances | Returns an array containing all descendants of the instance that match the selector string. |
| Instance:Remove | () | Sets the object's Parent to nil, and does the same for all its descendants. |
| Instance:remove | () | |
| Instance:RemoveTag | () | Removes a tag from the instance. |
| Instance:ResetPropertyToDefault | () | Resets a property to its default value. |
| Instance:SetAttribute | () | Sets the attribute with the given name to the given value. |
| Instance:WaitForChild | Instance | Returns the child of the Instance with the given name. If the child does not exist, it will yield the current thread until it does. |
Inherited from Object
| Name | Type / Returns | Description |
|---|---|---|
| Object:GetPropertyChangedSignal | RBXScriptSignal | Get an event that fires when a given property of the object changes. |
| Object:IsA | boolean | Returns true if an object's class matches or inherits from a given class. |
| Object:isA | boolean |
Events
Inherited from Instance
| Name | Type / Returns | Description |
|---|---|---|
| Instance.AncestryChanged | Fires when the Instance.Parent property of this object or one of its ancestors is changed. | |
| Instance.AttributeChanged | Fires whenever an attribute is changed on the Instance. | |
| Instance.ChildAdded | Fires after an object is parented to this Instance. | |
| Instance.childAdded | ||
| Instance.ChildRemoved | Fires after a child is removed from this Instance. | |
| Instance.DescendantAdded | Fires after a descendant is added to the Instance. | |
| Instance.DescendantRemoving | Fires immediately before a descendant of the Instance is removed. | |
| Instance.Destroying | Fires immediately before (or is deferred until after) the instance is destroyed via Instance:Destroy(). | |
| Instance.StyledPropertiesChanged | Fires whenever any style property is changed on the instance, including when a property is set to nil. |
Inherited from Object
| Name | Type / Returns | Description |
|---|---|---|
| Object.Changed | Fires immediately after a property of the object changes, with some limitations. |