UE5 Wrap Box UI

What You Will Learn

• What the Wrap Box widget does in Unreal Engine UMG
• How to add and position a Wrap Box inside a Widget Blueprint
• How to duplicate widgets and test automatic wrapping
• How Wrap Box moves items to the next line when space runs out
• How to use Fill Empty Space for flexible row layouts
• How to use Force New Line to control row breaks
• How to adjust Inner Slot Padding for cleaner spacing
• Where Wrap Box is useful in real game UI

What the Wrap Box Widget Does

Wrap Box is a UMG panel widget that arranges child widgets in a row and automatically wraps them onto the next line when there is not enough horizontal space.

In simple terms:

• It places items beside each other.
• It checks how much space is available.
• When the current row is full, it moves the next item to a new row.

This makes Wrap Box useful for UI layouts where the number of items is not fixed or where the screen size can change.

Why Wrap Box Is Useful

Many game UI layouts need to handle unpredictable item counts. The player may have five inventory items, or fifty. They may unlock three achievements, or a hundred. They may have a few tags, abilities, icons, or rewards.

If you build that kind of UI manually, it becomes painful fast.

Wrap Box helps because the layout adapts automatically. You add items, and the panel decides how to flow them into rows.

Step 1: Create a Widget Blueprint

Start by creating a Widget Blueprint.

In the Content Drawer:

Right-click → User Interface → Widget Blueprint

Name it something clear, for example:

WBP_WrapBoxExample

Open the widget and use a Canvas Panel as the root.

The Canvas Panel is useful for this example because it gives you direct control over the Wrap Box position and size while testing.

Step 2: Add the Wrap Box

In the Palette panel, search for:

Wrap Box

Drag it into the Canvas Panel.

Select the Wrap Box and configure the Canvas Panel slot settings.

Example values:

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

This places the Wrap Box in the center of the screen and gives it a fixed area so wrapping behavior is easy to see.

Why Size Matters for Wrap Box

Wrap Box needs a width limit to show its wrapping behavior clearly.

If the box is extremely wide, everything may stay on one line. If it is too narrow, items may wrap too aggressively. The visible width controls how many widgets fit before the next one moves to a new row.

For testing, a size like 500 by 100 works well because it makes the wrapping behavior obvious.

Step 3: Add an Image Widget

Drag an Image widget into the Wrap Box.

This Image acts as a simple visual item so you can see how the Wrap Box arranges children.

You can use any widget here, but Image is the fastest for a layout demonstration.

Step 4: Duplicate the Image Items

Select the Image widget and duplicate it multiple times.

Shortcut:

Ctrl + D

Create around twenty images so the Wrap Box has enough content to wrap into multiple rows.

Change the Color and Opacity of each image if you want the layout to be easier to inspect visually.

Step 5: Watch the Wrapping Behavior

As more images are added, the Wrap Box places them horizontally until the row runs out of room. Then the next item automatically moves to the next line.

This is the main value of Wrap Box. You do not need Blueprint logic to calculate rows manually.

The layout adapts based on the available size and child widgets.

How Wrap Box Differs From Horizontal Box

Horizontal Box places children in a single row. If you keep adding items, they continue horizontally and may overflow.

Wrap Box places children horizontally too, but it wraps them to a new row when space runs out.

Simple rule:

• Use Horizontal Box for one fixed row.
• Use Wrap Box when the row may overflow and needs to continue on another line.

Step 6: Use Fill Empty Space

Select one of the image widgets inside the Wrap Box.

In the Details panel, find the Wrap Box Slot settings and enable:

Fill Empty Space

When enabled, that widget expands to occupy remaining space in its row.

This is useful when you want the row to feel balanced instead of leaving awkward unused space at the end.

How Fill Empty Space Works

Fill Empty Space tells a child widget to stretch into available row space.

If only one widget in the row uses Fill Empty Space, it can take the remaining width. If multiple widgets use it, they may share the available space depending on layout behavior and settings.

This is useful for flexible UI, but do not overuse it. If every item stretches randomly, the layout can become less readable.

Step 7: Use Force New Line

Select a child widget inside the Wrap Box and enable:

Force New Line

This forces that widget to start on a new row, even if there is still enough room left in the current row.

This is useful when you want intentional row breaks.

When Force New Line Is Useful

Force New Line is useful when automatic wrapping is not enough and you want manual control over grouping.

Example use cases:

• starting a new category row in an inventory
• separating common and rare items
• grouping achievement badges
• breaking long tag lists into sections
• forcing a featured item to appear on its own row

It gives you layout control without abandoning the automatic wrapping behavior.

Step 8: Adjust Inner Slot Padding

Select the Wrap Box itself.

In the Details panel, find:

Inner Slot Padding

Set it to:

X = 2
Y = 2

This adds spacing between the child widgets.

Why Padding Matters

Without padding, UI items can look glued together. That makes the layout harder to read.

Small padding makes the UI cleaner immediately.

The values do not need to be large. Even two or four pixels can make a basic layout feel much more polished.

Step 9: Test Different Sizes

After the basic layout works, test different Wrap Box widths.

Try changing:

Size X = 300
Size X = 500
Size X = 800

You will see the same child widgets wrap differently depending on the available width.

This is the point of Wrap Box. It is flexible by design.

Practical Use Case: Inventory Grid

Wrap Box can be used for simple inventory grids where the number of items changes.

A basic inventory structure might look like this:

Scroll Box
  Wrap Box
    WBP_ItemSlot
    WBP_ItemSlot
    WBP_ItemSlot

The Scroll Box handles overflow. The Wrap Box handles row wrapping. Each item slot displays one inventory item.

That combination is very practical for simple inventory interfaces.

Practical Use Case: Achievement Panel

Achievement screens often need to display many badges or icons.

Wrap Box works well because the number of achievements can grow, and the layout can automatically flow into rows.

Each achievement can be a custom widget with:

• icon
• title
• locked or unlocked state
• tooltip
• progress value

Practical Use Case: Tag Lists

Wrap Box is also excellent for tag-style UI.

For example, a game item might have tags like:

Fire
Rare
Crafting
Two Handed
Heavy

Instead of manually placing each label, you can create small tag widgets and add them into a Wrap Box. They will wrap naturally depending on the panel width.

Practical Use Case: Ability Icons

If your game has many abilities, perks, or modifiers, Wrap Box can display them cleanly.

This is especially useful when different characters or builds have different numbers of abilities.

Hardcoding that kind of UI is a waste of time. Use a layout container that adapts.

Wrap Box vs Uniform Grid Panel

Wrap Box and Uniform Grid Panel can both create grid-like layouts, but they are not the same.

Wrap Box flows items automatically and wraps when space runs out. Uniform Grid Panel places widgets into explicit rows and columns.

Simple rule:

• Use Wrap Box for flexible, responsive item flow.
• Use Uniform Grid Panel when you need strict row and column control.

Wrap Box vs TileView

Wrap Box is a layout container. TileView is a data-driven entry widget system.

Use Wrap Box when you are manually adding child widgets or generating simple children into a flexible layout.

Use TileView when you have a larger object-based data list and want entry widgets generated from items.

For large inventories or data-heavy UI, TileView may be the better long-term choice. For lightweight responsive layout, Wrap Box is faster and simpler.

Common Mistake: Using Wrap Box for Strict Grids

Wrap Box is flexible, not strict.

If you need exact row and column placement, Wrap Box may not be the best choice. Use Uniform Grid Panel or Grid Panel instead.

Do not force a flexible widget to behave like a spreadsheet.

Common Mistake: No Inner Padding

A Wrap Box with many items and no spacing usually looks cluttered.

Add Inner Slot Padding early. It makes the layout readable and easier to debug.

Common Mistake: Wrong Parent Size

If the Wrap Box does not wrap the way you expect, check the parent size.

The available width controls wrapping behavior. If the parent allows the Wrap Box to expand forever, wrapping may not happen.

Make sure the Wrap Box has a meaningful width constraint.

Common Mistake: Expecting Runtime Data Behavior Automatically

Wrap Box arranges widgets, but it does not automatically create data-driven entries by itself.

If you want runtime data, you still need Blueprint logic to create widgets and add them as children.

Wrap Box handles layout. Your logic handles item creation.

How to Add Items Dynamically Later

A common next step is adding item widgets dynamically from an array.

The general flow is:

1. Create a custom item widget, such as WBP_ItemIcon.
2. Loop through your item array.
3. Create Widget for each item.
4. Set the item data on the widget.
5. Add Child to Wrap Box.

That turns the Wrap Box into a responsive runtime layout instead of a manually built test panel.

Good Widget Hierarchies with Wrap Box

For a simple responsive icon area:

Canvas Panel
  Wrap Box
    Image
    Image
    Image

For a scrollable inventory:

Canvas Panel
  Scroll Box
    Wrap Box
      WBP_ItemSlot
      WBP_ItemSlot
      WBP_ItemSlot

For a styled card area:

Border
  Scroll Box
    Wrap Box
      WBP_AchievementCard
      WBP_AchievementCard

Design Tips for Wrap Box UI

• Use consistent item sizes unless you intentionally want a mixed layout.
• Add inner padding so the UI does not look cramped.
• Use Scroll Box around Wrap Box if the item count can grow vertically.
• Use Force New Line only when you need intentional grouping.
• Avoid stretching too many children with Fill Empty Space.
• Use custom item widgets for real projects instead of raw images.

Conclusion

In this tutorial, you learned how to use the Wrap Box widget in Unreal Engine UMG to create responsive UI layouts. You added a Wrap Box to a Widget Blueprint, duplicated image widgets inside it, tested automatic wrapping, used Fill Empty Space, forced widgets onto new lines, and adjusted Inner Slot Padding for cleaner spacing.

Wrap Box is simple, but it is extremely useful for dynamic layouts where item count or screen size can change. Use it for inventories, achievements, icon grids, tag lists, and any UI where content needs to flow naturally into rows.

Watch the full video tutorial: Wrap Box in Unreal Engine UI

More Unreal Engine UI tutorials: rambod.net

Subscribe for more Unreal Engine tutorials: Subscribe to Rambod on YouTube

Resources

• YouTube Tutorial
• More Unreal Engine Tutorials
• Rambod Dev YouTube Channel

Frequently Asked Questions

What is Wrap Box in Unreal Engine UMG?

Wrap Box is a layout panel that places child widgets in a row and automatically wraps them to the next line when there is no more space.

When should I use Wrap Box?

Use Wrap Box for responsive item layouts such as inventories, achievement panels, icon grids, tag lists, and dynamic UI sections.

What does Fill Empty Space do in Wrap Box?

Fill Empty Space lets a child widget expand to occupy remaining space in its row.

What does Force New Line do?

Force New Line makes a child widget start on a new row even if there is still room in the previous row.

How do I add spacing between Wrap Box items?

Select the Wrap Box and adjust Inner Slot Padding. This adds spacing between child widgets.

Should I use Wrap Box or TileView for inventory UI?

Use Wrap Box for simpler responsive layouts. Use TileView when you need a more data-driven object-based UI system with generated entry widgets.