HUD

How to Make a Roblox Inventory GUI

An inventory shows everything a player owns as a grid of slots they can tap to equip or use. The shape is a ScrollingFrame full of uniform cells laid out by a UIGridLayout, plus a template slot your script clones once per owned item. This guide builds one in Luau and maps to the inventory template in the editor.

Open the Inventory template →

1. ScrollingFrame + UIGridLayout for uniform slots

A ScrollingFrame is the scrollable container; a UIGridLayout inside it arranges every child into a uniform grid automatically. Set CellSize and CellPadding once and any number of slots tile correctly.

local scroll = Instance.new("ScrollingFrame")
scroll.Size = UDim2.fromScale(0.6, 0.7)
scroll.Position = UDim2.fromScale(0.2, 0.15)
scroll.AutomaticCanvasSize = Enum.AutomaticSize.Y
scroll.CanvasSize = UDim2.new(0, 0, 0, 0)
scroll.ScrollBarThickness = 6
scroll.Parent = gui

local grid = Instance.new("UIGridLayout")
grid.CellSize = UDim2.fromOffset(90, 90)
grid.CellPadding = UDim2.fromOffset(8, 8)
grid.SortOrder = Enum.SortOrder.LayoutOrder
grid.Parent = scroll

2. Clone a template slot per item

Build one slot Frame (with a UICorner and an ImageLabel for the icon) and keep it as a template. Clone it for each owned item rather than constructing slots inline — your layout code stays tiny and every slot is identical.

Tip: Use a naming convention like Slot_<itemId> so your scripts can find, equip, or remove slots by id later.

3. Populate slots from player data

Loop the player's owned items, clone the template, set its icon and name, and parent it to the ScrollingFrame. The UIGridLayout positions it automatically and the canvas grows with AutomaticCanvasSize.

local function populate(items)
	for _, item in ipairs(items) do
		local slot = template:Clone()
		slot.Name = "Slot_" .. item.id
		slot.Icon.Image = item.icon
		slot.Parent = scroll
	end
end

FAQ

How do I add or remove items at runtime?

Clone the template slot and parent it to the ScrollingFrame to add; call Destroy() on the slot to remove. The UIGridLayout reflows the remaining slots automatically.

How do I show which item is equipped?

Give the template slot a UIStroke that starts transparent, and toggle its Transparency off on the slot the player taps. A colored stroke reads as a clear selection border.

Related guides

How to Use UIListLayout in Roblox →