Wrap Box in Unreal Engine UI

Quick guide to the Wrap Box panel in Unreal Engine. Learn wrapping, fill empty space, force new line, and padding for responsive UI layouts.

This is Rambod, and in this tutorial we’re breaking down the Wrap Box in Unreal Engine’s UMG system.
The Wrap Box is ideal for dynamic, responsive layouts where items automatically move to the next line when space runs out. Think inventories, icon grids, or achievement panels.

By the end, you’ll know how to:
✅ Add and configure a Wrap Box
✅ Duplicate widgets to test wrapping behavior
✅ Use Fill Empty Space for flexible layouts
✅ Use Force New Line to control row breaks
✅ Adjust Inner Slot Padding for cleaner spacing

1) Setting Up the Wrap Box

1. Start with a Canvas Panel as the root.
2. Drag a Wrap Box into the canvas.

Slot (Canvas Panel Slot) settings:

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

👉 This places the Wrap Box neatly centered on screen.

2) Adding and Duplicating Content

• Drag an Image widget into the Wrap Box.
• With it selected, press Ctrl + D repeatedly to duplicate.
• For this tutorial, make ~20 images.

💡 To visualize wrapping clearly, give each image a different Color & Opacity (red, green, blue, purple, etc.). This way, you’ll see how the Wrap Box distributes them into rows.

3) How Wrapping Works

• As images fill horizontally, once there’s no more room, the next image automatically moves down to a new line.
• No extra logic required — the Wrap Box handles it.

👉 This is why it’s perfect for dynamic item counts (inventories, icon bars, tag systems).

4) Using Fill Empty Space

• Select an image (e.g., Image #14).
• In the Details panel → Slot → Wrap Box Slot, enable Fill Empty Space.

Result:

• That widget expands to use leftover horizontal space in its row.
• The layout stays balanced even when the number of items doesn’t divide evenly.

💡 You can enable this on multiple widgets (e.g., the last item too) → they’ll share the remaining space.

5) Using Force New Line

• Still in the Wrap Box Slot settings, enable Force New Line on a widget.

Result:

• That widget will always begin on a new line, no matter how much space is left in the previous row.

👉 Great for grouping UI elements (e.g., separating sections in an inventory or breaking lines in chat bubbles).

6) Adding Inner Slot Padding

• Select the Wrap Box itself.
• In the Details panel → Child Layout, set Inner Slot Padding = (2, 2).

Result:

• Each widget has a small gap around it.
• Layout becomes cleaner, easier to read, and less cluttered.

7) Practical Use Cases

The Wrap Box shines when you need flexible, auto-adjusting layouts:

• 🎒 Inventories that expand with more items.
• 🏆 Achievement panels with variable counts.
• 💬 Chat message bubbles or tags.
• 🎯 Responsive icon bars that wrap neatly instead of overflowing.

Subtitle Expansion (Full Tutorial Flow)

“Start from a blank widget, add a Canvas Panel root, then drag in a Wrap Box. Anchor it center, size 500×100, alignment 0.5×0.5. Add one Image widget, then duplicate ~20 times with Ctrl + D. Give each image a different color for clarity. Watch: as the row fills, items wrap to the next line automatically. Select Image #14 → enable Fill Empty Space. It stretches to fill remaining row space. Do the same for the last image to see multiple items share leftover width. Enable Force New Line on one → it always starts a new row. Select the Wrap Box itself, set Inner Slot Padding = (2,2). The spacing between widgets is much cleaner now. Wrap Box is perfect for inventories, achievements, tags, or any responsive UI where the item count changes dynamically.”

Wrap-Up

The Wrap Box is a lightweight but powerful container for responsive UI layouts in Unreal Engine.

• Auto-wraps widgets into new rows
• Supports flexible sizing with Fill Empty Space
• Enforces line breaks with Force New Line
• Improves readability with Inner Slot Padding

👉 Use it whenever you want grids or lists that adapt automatically to screen size and item count.

🎥 Watch the full tutorial: YouTube Link
🌐 More UI tutorials at rambod.net
📲 Subscribe to Rambod Dev for the Widget Blueprint Series.