We have a screen which displays tiles and on each tile there is at least one field. Currently the tiles allow a maximum height of three rows of fields and an unlimited number of columns. The user is allowed to manually maintain the number of fields per tile which means that the width of the tiles can grow dynamically. The issue we are having is that it leaves some dead space on some of the tiles (see tiles 1 and 6 in Example 1 for extreme cases).
When the screen is resized, the order of the tiles is changed so that it wraps from left to right, top to bottom in the number indicated below in Example 2. However, when the wider tiles are re-ordered, there is obvious dead space remaining on the screen.
Is there a better way to have the tiles and fields work so that they not only reduce the amount of dead space but also allow for a intuitive reorder when the screen is resized?