Uniform Grid Panel in Unreal Engine UI

Beginner guide to the Uniform Grid Panel in Unreal Engine. Learn rows, columns, alignment, padding, and mixed widgets for clean UI layouts.

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.