I am building a simple shop for a mobile game.
The concept of the layout for this is pretty straight forward: the shop is displayed in portrait mode and divided into three parts, each being divided by a text label for that part of the shop followed by a grid that contains a number of items that you can buy. Each grid may contain 3 items per row. See the image below for an example of the layout.
Now, this is not a problem to achieve as long as the number of items in each grid are fixed. Problems occur as the number of items in any grid may vary depending on a number of circumstances.
For instance, if the first grid contains 6 items instead of 3 the grid will be two rows high and thus push the underlying grids downwards, making space for its items.
Problem is that no matter what I try the grid does not push any of it's underlying content downwards if it increases in height.
I have tried to acheive this by using widgets on grids to be able to anchor to them but could not make it work. I have also tried to use a table and putting the labels and grid inside. This almost worked but then the vertical position of the grids got unpredictable and weird.
Is there any suggested way to build this kind of layout? A last resort to this problem can of course be to write own scripts to try to calculate and execute grid resizing and positioning. But I hope that it can be accomplished by configuring and using the standard NGUI-components.
Any help will be much appreciated!