We use cookies on this site to enhance your user experience



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.

A UIGridLayout arranging inventory slots in a grid

By default, it lays out elements from left-to-right, top-to-bottom in alphabetical order, but this can be changed to use elements’ GuiObject/LayoutOrder by changing UIListLayout/SortOrder to LayoutOrder. 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 a UISizeConstraint. 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.


Name Type Description

Determines how much space there is between elements in the grid.


Determines the size of each element in the grid.


Determines the maximum number of cells that may be used in a row or column before before the next one is started.


Determines from which corner the grid starts laying out UI elements.

Inherited from Instance , UIBase , UIComponent , UILayout , UIGridStyleLayout

Archivable ClassName DataCost Name Parent RobloxLocked AbsoluteContentSize FillDirection HorizontalAlignment SortOrder VerticalAlignment