UIGridLayout
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.
Summary
Properties
The number of elements in the grid.
The absolute size of each element in the grid.
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 the next one is started.
Determines from which corner the grid starts laying out UI elements.
The absolute size of space being taken up by the grid layout.
Determines the axis in which UI objects are laid out.
Determines the horizontal alignment of UI elements within the parent element.
Determines the order in which child UI objects are placed in a layout.
Determines the vertical alignment of UI elements within the parent element.
Properties
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.
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.
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.
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.
StartCorner
StartCorner (Enum.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 Enum.StartCorner of BottomRight. The UIGridStyleLayout.FillDirection is Horizontal.