Horizontal Box in Unreal Engine UI – Build Clean Row Layouts

Learn how to use Unreal Engine’s Horizontal Box widget to build structured row-based layouts with Fill, Auto, alignment, and nested panels.

This is Rambod, and in this tutorial we’re breaking down the Horizontal Box layout in Unreal Engine’s UMG system.

The Horizontal Box is one of the most important containers in UI design because it lets you arrange widgets side by side in a row. By controlling slot settings like Fill, Auto, alignment, and padding, you can create clean, responsive layouts that scale properly across different screen sizes. This makes it a staple for HUDs, menus, rows of stats, and item lists.

1) Setting Up the Canvas and Horizontal Box

• Start with a Canvas Panel as the root container.
  → The Canvas gives you free placement anywhere on the screen.
• Drag a Horizontal Box into the Canvas.
• With the Horizontal Box selected, go to the Slot (Canvas Panel Slot) section in the Details panel and set:
  • Position X = 450
  • Position Y = 400
  • Size X = 1000
  • Size Y = 250

👉 This creates a wide row area with enough room for four child widgets placed side by side.

2) Adding Text Blocks as Columns

1. Inside the Horizontal Box, drag in a Text Block.

   • Change its text to “Col One”.

2. Add or duplicate another Text Block.

   • Change the text to “Col Two”.
   • Look at the Horizontal Box Slot settings in the Details panel:
     • Size = Fill
     • Fill Ratio = 1

💡 Fill + ratio 1 means this column will take an equal share of space compared to other Fill slots. If two children have Fill=1, they split space 50/50.

3) Rearranging with Arrow Handles

• In the Designer viewport, when you click on a child widget (e.g., Col Two), you’ll see small arrow handles appear.
• These let you move the child left or right within the Horizontal Box without changing the hierarchy panel.
• This makes visual editing and prototyping much faster.

4) Adding a Center Title

• Insert a third Text Block.
• Change its text to something like “Title”.
• In the slot settings:
  • Set Size = Fill
  • Set Horizontal Alignment = Center
  • Set Vertical Alignment = Center

This ensures the title sits perfectly centered in the middle of its slot, even if the screen scales.

5) Nesting a Vertical Box for a Column

• Drag a Vertical Box into the Horizontal Box, placing it to the right of the title.

• Inside the Vertical Box, add five Text Blocks one after another.
  → They stack vertically, creating a mini list inside the row.

• Select the Vertical Box slot and set:

  • Size = Fill
  • Padding = 10

Now you have a clean vertical list as the fourth “column,” demonstrating how layout panels can be nested for more complex UI.

6) Understanding Slot Settings (Fill vs Auto)

The power of the Horizontal Box comes from slot control:

• Size: Auto vs Fill

  • Auto: Widget wraps tightly around its content (e.g., a button resizes to its text).
  • Fill: Widget expands to take leftover space. Use Fill Ratio (Weight) to control proportional sizing.

• Padding: Adds breathing space around the widget. Essential for avoiding cramped layouts.

• Alignment:

  • Horizontal Alignment: Left, Center, or Right within the slot.
  • Vertical Alignment: Top, Center, or Bottom.

👉 Together, these settings define whether a widget stays tight, expands equally, centers, or pads nicely in your row.

7) Full Recap

• We used a Canvas Panel to freely place the Horizontal Box.
• Added two columns (Col One, Col Two) and gave them equal width with Fill.
• Inserted a centered title with alignment set to Center.
• Nested a Vertical Box as Column 4, showing how row/column layouts can combine.
• Reviewed slot settings like Auto vs Fill, alignment, and padding.
• Used arrow handles in the Designer to quickly reorder children.

This Horizontal Box pattern is essential in UI design. You’ll use it constantly when building HUDs, menus, or inventory rows — clean, scalable, and flexible.

Subtitle Expansion (Full Tutorial Flow)

“This is Rambod horizontal box layout in Unreal UI. Start with a canvas panel, then drag in a horizontal box. Position it at X=450, Y=400, with size 1000×250 to fit four children. Add a text block for Col One, then another for Col Two. In the slot settings, set size to Fill and ratio 1 for equal space. Use the arrow handles in the viewport to reorder easily. Add a third text block as a title, and align it center horizontally and vertically. Then insert a vertical box to the right, fill it with five text blocks, and give it padding 10. This shows how layouts can be nested. Remember slot settings: Auto for tight wrapping, Fill for flexible space with ratio, Padding for breathing room, and Alignment to place widgets properly. We used fill columns, a centered title, and a nested vertical list to create a clean layout. This is the core of UI structure in Unreal Engine.”

Wrap Up

The Horizontal Box is the go-to tool for row-based UI layouts in Unreal Engine. Once you master:

• Fill vs Auto sizing
• Alignment and Padding
• Nesting panels (Vertical inside Horizontal)
• Quick reordering with handles

…you can build professional, responsive UI for any project.

👉 Watch the full tutorial here: YouTube Link
👉 More UMG layout lessons on rambod.net
👉 Subscribe to Rambod Dev for the full Widget Blueprint series.