Any idea how to arrange a grid of 3 items like below in a grid, but when the screen is shortened horizontally then the middle grid item is the one to be thrown under, rather than the last item? I’ve been trying with nested wrap boxes but no luck.
You need to put the whole lot in a scale box ( I think it’s called ).
tl;dr: check the bottom bit of the post frist, I was initially thinking outside of the box but the answer might be much simpler…
but when the screen is shortened horizontally
How dynamic does this need to be? Are there steps? As in - there are only X horizontal sizes the container can have? Do the children have X predefined sizes? Or do they adapt size to the content in a pixel perfect way?
I’d try the non-uniform grid here instead of a wrap box - I feel you will have more control over the flow:
Its elements can span across rows / columns.
- when resizing, you could query the children for the number of columns they wish to occupy.
- you know how many column are available (and you can also specify column distribution percentage wise)
- if a child fits into the remaining space, place it there, take note how many more columns are available for the next child in this row
- if there is not enough space, span the previous child across the entire row, and place the next one into a new row
- rinse and repeat
There surely is a gotcha there but I feel it could work. This would allow you to place any element anywhere you need.
If every element has unique size, then wrap box is obviously much better. Perhaps all you need here is this:
You can flag it for every element.
When it comes to reorganising them by index in the container, you’d need to keep a separate array and set the order there as inserting into panels is not a thing in UMG. Once you have an ordered array, you can repopulate the container.