Title: need help with GRID theme
Last modified: August 20, 2016

---

# need help with GRID theme

 *  [nihil.core](https://wordpress.org/support/users/nihilcore/)
 * (@nihilcore)
 * [14 years ago](https://wordpress.org/support/topic/need-help-with-grid-theme/)
 * Hey there!
 * I incorporated part of the GRID WordPress Theme by Straightline, which you can
   find here [http://straightline.jp/36](http://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 [http://img576.imageshack.us/img576/3175/75869585.png](http://img576.imageshack.us/img576/3175/75869585.png)
 * > With 5 posts the order changes from rows to columns
    [http://img204.imageshack.us/img204/3306/49932836.png](http://img204.imageshack.us/img204/3306/49932836.png)
 * > I can still have 4 columns with 7 items
    [http://img17.imageshack.us/img17/8575/62540435.png](http://img17.imageshack.us/img17/8575/62540435.png)
 * > And so on…
    [http://img225.imageshack.us/img225/2214/82243827.png](http://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.
       http://www.straightline.jp/
   
       Code licensed under the BSD License
       http://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!

The topic ‘need help with GRID theme’ is closed to new replies.

## Tags

 * [columns](https://wordpress.org/support/topic-tag/columns/)
 * [grid](https://wordpress.org/support/topic-tag/grid/)
 * [items](https://wordpress.org/support/topic-tag/items/)
 * [rows](https://wordpress.org/support/topic-tag/rows/)

 * 0 replies
 * 1 participant
 * Last reply from: [nihil.core](https://wordpress.org/support/users/nihilcore/)
 * Last activity: [14 years ago](https://wordpress.org/support/topic/need-help-with-grid-theme/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics