Problem to set item's location in column and row

Hi all, i would like to create a photo gallery, which contain 3 items per column, and the row is depend on the total items in an array.

i try to explain clearly with icons:

Let’s say i have total 8 items in the array. Each column i would like to place 3 items only, means i will have something like below:

:jail: :jail: :jail:

:jail: :jail: :jail:

:jail: :jail:

But my current script goes wrong when it reach item number 7;
:jail: :jail: :jail:

:jail: :jail: :jail:

                 [COLOR=White]____________[/COLOR]:jail:  :jail:

the item 7, i would like to locate it at x=0, but it show at x = 660.

I understand what’s wrong with my current script, but i just donno how to think of a new logic to make it works.

Can anyone help me?
Thanks for your help.


var col:int=0;
var row:int=0;
var colMax = 3;

function displayItem() {
var item :ItemHolder;
trace(itemArray.length); //itemArray.length = 8

for (var i:int = 0; i < itemArray.length; i++) {
    item = new ItemHolder();
    addChild(item);        
    
    if (i<colMax) {
        item.x = (i)*(item.width+20);
    } else  {
        item.x = (i-colMax)*(item.width+20);
    }
    if (col==colMax) {
        row++;
        col = 0;
    }
    
    item.y = row * (item.height+20);
    col++;