UI Layouts and Constraints | Documentation

When you design a graphical user interface in Roblox, you don't have to arrange everything manually or compromise on appearance across various devices. With the addition of layouts and constraints, you can create high-quality interfaces with minimal or no scripting.

UI layouts allow you to organize GuiObjects quickly without having to manually set their size or position. They provide fast and intuitive behavior to structure and sort GuiObjects that frequently change.

Inventory menu designed with a grid layout
UI constraints allow you to create minimum and maximum sizing limitations so your GuiObjects function properly within different screen sizes without overlapping or having large gaps between one another.

Label text constrained to a minimum and maximum size

Layouts

There are four types of layouts you can use within your experiences: list, grid, table, and page.

To use a layout, you must insert it as a sibling to the applicable GuiObjects. If you use multiple layouts in the same parent GuiObject, only the first layout you added applies, although you can use Folders in a UI hierarchy to define a distinct layout type per folder. For example, you can set up a Frame with multiple Folder children, each with a different UILayout type. Additionally, Folder contents are exempt from the effects of a UILayout sibling.

List

The UIListLayout positions sibling GuiObjects into a single vertical or horizontal row within their parent GuiObject while retaining each object's original size. Whenever you add or remove a sibling object, the UIListLayout repositions the list accordingly.

This layout is useful when you only want to order objects within a row or column, such as a dropdown menu.

After you add a UIListLayout, you cannot edit the Position property for any sibling object within the Properties window.

Grid

The UIGridLayout positions sibling GuiObjects into a grid of uniform cells of the same size within their parent GuiObject. The UIGridLayout adds cells to a row one-by-one until the next cell doesn't fit, then it starts the next row. For further control, you can use the FillDirectionMaxCells property to set the maximum number of cells per row.

This layout is useful when you want to display objects within a fixed scale, such as a shop inventory.

Once you add a UIGridLayout, you cannot edit the Position or Size property for any sibling object within the Properties window.

By default, this layout positions GuiObjects from left-to-right and top-to-bottom in alphabetical order, but when you change the SortOrder property from Name to LayoutOrder, GuiObjects sort in ascending order where lower LayoutOrder values have more priority over higher values, and GuiObjects with equal values sort depending on the order in which you added them.

The UIGridLayout respects any constraints you place on objects within the grid. For example, if an object has a UISizeConstraint with a MinSize property that is higher than the grid's CellSize property, the object will span multiple cells.

Table

The UITableLayout positions sibling GuiObjects into rows, and any child GuiObjects of these sibling GuiObjects become columns. Each cell within a row has the same height while each cell within a column has the same width.

Unless you enable the FillEmptySpaceColumns or FillEmptySpaceRows property, the parent GuiObject determines the dimensions of the cells.

If you change the FillDirection property from Vertical to Horizontal, the UITableLayout positions sibling GuiObjects into columns instead, and any child GuiObjects of these sibling GuiObjects become rows.

This layout is useful when you want further control over which items display where within a grid, such as a backpack inventory that separates items into categories like weapons and potions.

Once you add a UITableLayout, you can edit the Position or Size property for any sibling object within the Properties window, but it will not take effect.

The UITableLayout respects and is responsive to any UISizeConstraint you place on objects within the table. For example, if an object has a UISizeConstraint with a MinSize property within a header cell, the rest of the cells within the column will be the same size as the header cell.

Note that if the MaxSize property restricts a cell's size from filling the allotted space of a row or column that is wider than the cell, the object aligns to the top-left of the cell.

Page

When you parent a UIPageLayout to a GuiObject, every sibling GuiObject of the UIPageLayout becomes a unique page that you can transition to through script. This layout is useful when you want to create menus with multiple pages, such as tutorials or character customization screens.

After you create multiple pages within the UIPageLayout, you need to use scripting to transition from page to page. For example, the following code creates three separate pages, each with a different color frame that takes up the entire screen. Studio then transitions between the pages every two seconds, moving from page 1 to page 2 to page 3, then returning back from page 3 to page 2 to page 1:


local screenGui = script.Parent
local pageLayout = Instance.new("UIPageLayout")
pageLayout.Parent = screenGui

local page1 = Instance.new("Frame")
page1.Size = UDim2.fromScale(1, 1)
page1.BackgroundColor3 = Color3.fromRGB(25, 100, 100)
page1.Parent = screenGui

local page2 = Instance.new("Frame")
page2.Size = UDim2.fromScale(1, 1)
page2.BackgroundColor3 = Color3.fromRGB(100, 25, 100)
page2.Parent = screenGui

local page3 = Instance.new("Frame")
page3.Size = UDim2.fromScale(1, 1)
page3.BackgroundColor3 = Color3.fromRGB(100, 100, 25)
page3.Parent = screenGui

while true do
	pageLayout:Next()
	task.wait(2)
	pageLayout:Next()
	task.wait(2)
	pageLayout:Previous()
	task.wait(2)
	pageLayout:Previous()
	task.wait(2)
end

If you want to view pages while editing in Studio, you can use the Command Bar to navigate from one page to another. This allows you to review where you need to make changes without having to play your experience each time.

To navigate to another page while in Edit mode:

In the Explorer window, select the UIPageLayout object.
From the View tab, open the Command Bar.
- To transition to the next page, input game:GetService("Selection"):Get()[1]:Next().
- To transition to the previous page, input game:GetService("Selection"):Get()[1]:Previous().
Press Enter.

Constraints

There are three types of constraints you can use for a user interface object: size, text size, and aspect ratio. To use a constraint, you must set it as a child of the GuiObject you want to constrain.

Size

The UISizeConstraint specifies a minimum and maximum size for a GuiObject. This constraint ensures that the GuiObject doesn't become too small or large on different screen sizes.

For example, if you set the MaxSize property to {400, 400} and the MinSize to {200, 200}, the GuiObject cannot scale larger than 400 pixels wide and 400 pixels tall, or smaller than 200 pixels wide and 200 pixels tall.

When you apply both a size-related layout and a UISizeConstraint, the constraint will override the layout and control the object's size.

Aspect Ratio

The UIAspectRatioConstraint specifies an aspect ratio for a GuiObject regardless of its actual size, so that it doesn't warp or distort within different screen sizes. This constraint ensures that the GuiObject maintains a specific aspect ratio even if its size is set as a percentage of its parent.

When you apply both a size-related layout and a UIAspectRatioConstraint, the constraint will override the layout and control the object's size.

Scale

A UIScale object stores a numerical value that multiplies the AbsoluteSize property of the parent GuiObject. For example, if you want an object to be twice as large as it currently is, you can insert a UIScale object with a Scale property of 2.

This object is useful when you want to resize GuiObjects proportionally for different screen sizes without having to manually change the size and position properties for each individual GuiObject. It is also useful to test a range of different sizes without committing to the changes.