Class
UIGridLayout
Positions sibling UI elements by filling rows using the space of the parent UI element.
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.
Properties 6#
AbsoluteCellCountVector2 | The number of elements in the grid.ReadOnlyNotReplicated |
AbsoluteCellSizeVector2 | The absolute size of each element in the grid.ReadOnlyNotReplicated |
CellPaddingUDim2 | Determines how much space there is between elements in the grid.ReadSafe |
CellSizeUDim2 | Determines the size of each element in the grid.ReadSafe |
FillDirectionMaxCellsint | Determines the maximum number of cells that may be used in a row or column before the next one is started.ReadSafe |
StartCornerStartCorner | Determines from which corner the grid starts laying out UI elements.ReadSafe |
AbsoluteCellCount: Vector2#
ReadOnlyNotReplicated
Measures the maximum number of elements in each direction. Read-only.
AbsoluteCellSize: Vector2#
ReadOnlyNotReplicated
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: UDim2#
ReadSafe
(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: UDim2#
ReadSafe
(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: int#
ReadSafe
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#
ReadSafe
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.
Inherited members#
Inherited from UIGridStyleLayout 7
Properties (5)
AbsoluteContentSize, FillDirection, HorizontalAlignment, SortOrder, VerticalAlignment
Methods (2)
Inherited from Instance 58
Properties (10)
Archivable, archivable, Capabilities, IsInSandbox, Name, Parent, PredictionMode, RobloxLocked, Sandboxed, UniqueId
Methods (39)
AddTag, children, ClearAllChildren, Clone, clone, Destroy, destroy, FindFirstAncestor, FindFirstAncestorOfClass, FindFirstAncestorWhichIsA, FindFirstChild, findFirstChild, FindFirstChildOfClass, FindFirstChildWhichIsA, FindFirstDescendant, GetActor, GetAttribute, GetAttributeChangedSignal, GetAttributes, GetChildren, getChildren, GetDebugId, GetDescendants, GetFullName, GetStyled, GetStyledPropertyChangedSignal, GetTags, HasTag, IsAncestorOf, IsDescendantOf, isDescendantOf, IsPropertyModified, QueryDescendants, Remove, remove, RemoveTag, ResetPropertyToDefault, SetAttribute, WaitForChild