Uniform Grid Panel in Unreal Engine UI

This is Rambod, and in this tutorial we’re covering the Uniform Grid Panel in Unreal Engine’s UMG system.
Uniform Grid Panels give you a fast and organized way to build UI where everything snaps into neat rows and columns — ideal for menus, stat panels, or icon layouts.

By the end, you’ll know how to:
✅ Add and configure a Uniform Grid Panel
✅ Place and align widgets using rows and columns
✅ Customize alignment (center vs fill)
✅ Use padding for spacing between cells
✅ Mix different widget types like images and text

1) Setting Up the Uniform Grid Panel

• Start with a Canvas Panel as the root.
• Drag a Uniform Grid Panel into it.

Slot (Canvas Panel Slot) settings:

• Anchor → Center
• Position X = 0, Y = 0
• Size X = 500, Y = 300
• Alignment X = 0.5, Y = 0.5

👉 This centers the grid panel perfectly on the screen.

2) Adding Image Widgets

• Drag an Image widget into the Uniform Grid Panel.
• Duplicate it 5 times (Ctrl + D) → total of 6 images.

Now we’ll arrange them into a grid using rows and columns.

3) Organizing with Rows and Columns

• Select the 2nd Image → Row = 0, Col = 1
• Select the 3rd Image → Row = 0, Col = 2
• Select the 4th Image → Row = 1, Col = 0
• Select the 5th Image → Row = 1, Col = 1
• Select the 6th Image → Row = 1, Col = 2

💡 Tip: Use the arrow buttons in the Details panel to quickly move widgets between rows/columns without typing numbers.

4) Coloring for Clarity

Assign each image a different color so the grid is easy to visualize:

• 1st Image → Light Blue
• 2nd → Red
• 3rd → Blue
• 4th → Dark Red
• 5th → Green
• 6th → Purple

👉 Color coding is a simple trick for testing layouts.

5) Alignment Inside Cells

Select all six images → check Slot: Uniform Grid Slot.

Here you can control alignment:

• Horizontal Alignment
• Vertical Alignment

Options:

• Center → keeps widgets centered in their cells.
• Fill → stretches them to occupy the full space.

Try combinations:

• Horizontal Fill + Vertical Center → wide stretch but vertically centered.
• Both Fill → widget completely fills the cell.

6) Understanding Grid Indexing

Uniform Grid Panels use zero-based indexing:

• Row 0, Col 0 → First row, first column.
• Row 0, Col 1 → First row, second column.
• Row 1, Col 0 → Second row, first column.

👉 Just like programming arrays, counting starts from 0.

7) Adding Padding

• Select the Uniform Grid Panel itself.
• Under Child Layout → Slot Padding: set to 15.

This adds spacing between cells → makes the grid easier to read and visually clean.

8) Mixing Widgets: Adding Text Blocks

Uniform Grid Panels aren’t limited to images. You can mix in text, buttons, or other widgets.

• Drag a Text Block into Row 2, Col 0.
• Add another in Row 2, Col 1.
• Add a third in Row 2, Col 2.

👉 Change text content and bump up Font Size for clarity.

Now you have a 3-row layout with images on top and text on the bottom row.

9) Recap of Key Features

• Even grid layout → rows and columns auto-size equally.
• Row & Col Indexing → zero-based for precision.
• Alignment options → center or fill inside each cell.
• Padding → adds spacing between widgets.
• Mixed widgets → images, text, or anything else.
• Fast editing → arrow buttons make rearrangement simple.

Subtitle Expansion (Full Tutorial Flow)

“Start with a Canvas Panel, drop in a Uniform Grid, anchor it center, size 500×300, align 0.5×0.5. Add an Image widget, duplicate until you have six. Place them using row/col: (0,0), (0,1), (0,2), (1,0), (1,1), (1,2). Color them Light Blue, Red, Blue, Dark Red, Green, Purple for clarity. Select all, adjust alignment: try Fill vs Center combos. Rows and columns start from 0, just like programming arrays. Add slot padding = 15 for spacing. Add three Text Blocks to Row 2 (cols 0,1,2). Increase font size. Now you’ve got a clean, organized 3×3 layout with images + text. Perfect for menus, inventories, and dashboards.”

Wrap-Up

The Uniform Grid Panel is a quick way to build clean, even layouts in Unreal Engine UI.
It ensures your widgets snap neatly into place, supports both images and text, and is perfect for structured systems.

👉 Use it for:

• Menus & HUDs
• Inventory screens
• Stat dashboards
• Icon grids

🎥 Watch the full tutorial: YouTube Link
📘 Docs: Unreal Engine Documentation
🌐 More tips at rambod.net
📲 Subscribe to Rambod Dev for the Widget Blueprint Series.