need help with GRID theme

Hey there!

I incorporated part of the GRID WordPress Theme by Straightline, which you can find here https://straightline.jp/36, into my custom theme to have a grid of posts in certain pages.

Everything is fine, except that this grid-item order works in a strange way.
> With 4 posts everything is fine
https://img576.imageshack.us/img576/3175/75869585.png

> With 5 posts the order changes from rows to columns
https://img204.imageshack.us/img204/3306/49932836.png

> I can still have 4 columns with 7 items
https://img17.imageshack.us/img17/8575/62540435.png

> And so on…
https://img225.imageshack.us/img225/2214/82243827.png

So now, I’d like to have items ordered in rows as with the first 4 posts.
I think the problem is in the Js file, but I’m not that good to understand and properly modify what happens in it.
Here is the grid.js code:

/*
Copyright (c) 2010, STRAIGHTLINE All rights reserved.
https://www.straightline.jp/

Code licensed under the BSD License
https://www.opensource.org/licenses/bsd-license.php
*/

var GridLayout = new Class({
    isResizing: false,
    initialize: function(options) {

        if ($$('.single').length == 0 && $$('.page').length == 0) {
            $$('.grid').each(function(grid) {
                var firstGridItem = grid.getElement('.grid-item');
                var firstGridContent = grid.getElement('.grid-content');
                var gridContentWidth = firstGridItem.getStyle('width').toInt() -
                                        firstGridContent.getStyle('margin-left').toInt() -
                                        firstGridContent.getStyle('margin-right').toInt() -
                                        firstGridContent.getStyle('padding-left').toInt() -
                                        firstGridContent.getStyle('padding-right').toInt();
                ['img', 'object', 'embed'].each(function(tag) {
                    grid.getElements(tag).each(function(element) {

                        if (Browser.Engine.trident) {
                            element.width = gridContentWidth;
                        } else {
                            element.setStyle('width', gridContentWidth);
                        }
                    });
                });
            });
        }

        $$('.grid-item').each(function(gridItem, index) {
            gridItem.setStyle('position', 'absolute');
        });

        window.addEvent('resize', function() {
            if (this.isResizing == false) {
                this.isResizing = true;
                (function() {
                    this.control();
                    (function() { this.isResizing = false; }.bind(this)).delay(1);
                }.bind(this)).delay(1);
            }
        }.bind(this));
    },

    control: function() {

        var wrapper = $('wrapper');
        wrapper.setStyles({
            width: 'auto',
            opacity: 0
        });
        var wrapperMaxWidth = 0;

        $$('.grid').each(function(grid) {

            grid.setStyles({
                width: 'auto',
                height: 'auto'
            });

            var gridMaxWidth = 0;
            var gridMaxHeight = 0;
            var firstGridItem = grid.getElement('.grid-item');
            var gridItemWidth = firstGridItem.getSize().x +
                            firstGridItem.getStyle('border-width').toInt() +
                            firstGridItem.getStyle('margin-left').toInt() +
                            firstGridItem.getStyle('margin-right').toInt() +
                            firstGridItem.getStyle('padding-left').toInt() +
                            firstGridItem.getStyle('padding-right').toInt();
            var gridItems = grid.getElements('.grid-item');
            var colCount = Math.max(Math.floor(grid.getSize().x / gridItemWidth), 1);
            var rowCount =  Math.max(Math.ceil(gridItems.length / colCount), 1);
            wrapperMaxWidth = Math.max(wrapperMaxWidth, Math.ceil(gridItems.length / rowCount) * gridItemWidth);

            for (var col = 0; col < colCount; col++) {

                var colMaxHeight = 0;
                for (var row = 0; row < rowCount; row++) {

                    var curGridItemIndex = col * rowCount + row;
                    var gridItem = gridItems[curGridItemIndex];

                    if ($defined(gridItem)) {
                        gridItem.removeClass('grid-item-start');
                        gridItem.removeClass('grid-item-end');
                        if (row == 0) {
                            gridItem.addClass('grid-item-start');
                        }
                        if (row + 1 == rowCount || curGridItemIndex + 1 == gridItems.length) {
                            gridItem.addClass('grid-item-end');
                        }
                        gridItem.setStyles({
                            opacity: 0,
                            top: row > 0 ? gridItems[curGridItemIndex - 1].getCoordinates(grid).bottom : 0,
                            left: col > 0 ? gridItems[(col - 1) * rowCount + row].getCoordinates(grid).right : 0
                        });
                        colMaxHeight += gridItem.getSize().y;
                        gridMaxHeight = Math.max(gridMaxHeight, colMaxHeight);
                    }
                }

            }

            grid.setStyles({
                width: gridMaxWidth,
                height: gridMaxHeight
            });

        }.bind(this));

        wrapper.setStyles({
            width: wrapperMaxWidth,
            opacity: 1
        });

        $$('.grid-item').each(function(gridItem, index) {
            (function() { gridItem.tween('opacity', 1); }).delay(1 * index);
        });
    }
});

Any suggestion?
Thank You!