Title: Posts in grids
Last modified: August 19, 2016

---

# Posts in grids

 *  Resolved [emanoelmelo](https://wordpress.org/support/users/emanoelmelo/)
 * (@emanoelmelo)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/posts-in-grids/)
 * Ok this is a bit complicated. I want that WP loop shows my posts in a paginated
   page (category template), ordered in a grid from left to right, top to bottom.
   I found this script that does it fine…UNTIL you get an incomplete grid. Seems
   like it first shows the first column images, so it’s ordering by column not by
   row, leaving a lot of blank space on the horizontal. Here is the code, I really
   apreciate any help:
 * _[Code moderated as per the [Forum Rules](http://wordpress.org/support/topic/68664).
   Please use the [pastebin](http://wordpress.pastebin.ca/)]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/posts-in-grids/#post-1467650)
 * i am working to resolve this issue, but this will take a few days.
 * however, what you are trying to do – left-to-right; top-to-bottom – is in the
   simplest way done with wrapping the post into a div, fixed width, floated left,
   right margin; with a counter to add a ‘clear-left’ to every first post in a row,
   and a different margin to the last post in a row:
 *     ```
       <?php
       if (have_posts()) :
         $columns = 5; //set the number of columns
         $i = 1;
         while (have_posts()) : the_post(); ?>
             <div class="post<?php if( ($i-1)%$columns == 0 ) { echo ' clearleft'; };  if( $i%$columns == 0 ) { echo ' last'; }; ?>" id="post-<?php the_ID(); ?>">
             <!-- core post area; title, content, thumbnails, postmeta, etc -->
             </div>
             <?php $i++;
         endwhile;
   
         next_posts_link('&laquo; Older Entries');
         previous_posts_link('Newer Entries &raquo;');
       else:
         echo 'no posts';
       endif; ?>
       ```
   
 * the css for this:
 *     ```
       .post {
       float:left;
       width: 100px;
       margin-right: 10px;
       max-height:150px; /*not necessary*/
        }
       .post.clearleft { clear:left; }
       .post.last { margin-right: 0px; }
       ```
   
 *  Thread Starter [emanoelmelo](https://wordpress.org/support/users/emanoelmelo/)
 * (@emanoelmelo)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/posts-in-grids/#post-1467834)
 * Interesting solution alchymyth, thank you!!! One of my problems is that divs 
   have different heights, so if they are too long, they “move” the divs bellow.
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/posts-in-grids/#post-1467837)
 * > divs have different heights, so if they are too long, they “move” the divs 
   > bellow.
 * then you may want to have a look at this:
    [http://www.creativedepart.com](http://www.creativedepart.com)
 * a design like in the above link could be achieved with this code from what i 
   call [‘stacking posts’](http://www.transformationpowertools.com/wordpress/playing-with-columns-stacking-posts-grid-style).
 *  Thread Starter [emanoelmelo](https://wordpress.org/support/users/emanoelmelo/)
 * (@emanoelmelo)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/posts-in-grids/#post-1467859)
 * Very nice!! Thanks for the tip, alchymyth!!!!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Posts in grids’ is closed to new replies.

## Tags

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

 * 4 replies
 * 2 participants
 * Last reply from: [emanoelmelo](https://wordpress.org/support/users/emanoelmelo/)
 * Last activity: [16 years, 1 month ago](https://wordpress.org/support/topic/posts-in-grids/#post-1467859)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics