I got something that looks good, but… with a catch.
Basically, I have everything like so:
There’s a vertical box which holds everything: a horizontal box that holds each row. Within each horizontal box there are buttons. The second row holds a lovely spacer.
Now here’s the trick: Make the “right padding” on each button 10, and the “top padding” on each horizontal box -20. This moves the boxes up.
And here’s the catch: depending how close you move each button and horizontal boxes, the buttons overlap. In other words, crazy things happen. One “fix” is to make the buttons far apart like I did, (but even for mine there is a bit of glitchyness), but other than that… idk, mate. You could try to do some fancy cheese with math and computing whether the mouse is within a hexagon shape or not, but other than that… I would do your 3 box idea.
In other words, I would create a widget called “hexaButton”, which has an event “onHover”, “onPress”, etc. Then you would need to create the fancyness only once, and just drag it in like any other widget.
I wish UMG had the ability to have custom shapes