Title: A tutorial or plugin for a grid based theme?
Last modified: August 19, 2016

---

# A tutorial or plugin for a grid based theme?

 *  [felixthecat](https://wordpress.org/support/users/felixthecat/)
 * (@felixthecat)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/a-tutorial-or-plugin-for-a-grid-based-theme/)
 * Hi,
 * I would like to know if there is a tutorial or plugin to make posts align in 
   a grid as seen on sites such as:
 * Swiss Miss (Click Grid layout next to the search bar):
    [http://www.swiss-miss.com/](http://www.swiss-miss.com/)
 * Creative Depart:
    [http://www.creativedepart.com/](http://www.creativedepart.com/)
 * I’d love to learn the technique and implement this layout over my summer holidays
   over here in Australia, any help would be much appreciated.
 * I hope you all have a happy, creative and successful new year!

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

 *  [Peter Boosten](https://wordpress.org/support/users/pboosten/)
 * (@pboosten)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/a-tutorial-or-plugin-for-a-grid-based-theme/#post-1325712)
 * It’s not that hard: your post div can be made very small, say width 150px and
   floated left, and all other posts will then line up next to the first post. If
   the line is full, it will descend to the next line.
 * I’ve done something like this in [this part](http://www.boosten.org/books/) of
   [my tutorial](http://www.boosten.org/page-templates-in-wordpress/) (forget the
   title, not really relevant for your problem). The css is in [the tutorial](http://www.boosten.org/page-templates-in-wordpress/).
 * Peter
 *  Thread Starter [felixthecat](https://wordpress.org/support/users/felixthecat/)
 * (@felixthecat)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/a-tutorial-or-plugin-for-a-grid-based-theme/#post-1325898)
 * Thanks Peter! Will try it out! Hope you have a great new year!
 *  [Jonas Grumby](https://wordpress.org/support/users/ss_minnow/)
 * (@ss_minnow)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/a-tutorial-or-plugin-for-a-grid-based-theme/#post-1326031)
 * It doesn’t seem to be quite that simple. You have to set the height to get the
   posts to line up in neat rows. If you are displaying post content it can get 
   sloppy. It helps to set your post class to `overflow: hidden;`. It also helps
   to show `the_excerpt` rather than `the_content` so your post images don’t get
   squeezed in. I understand that the example is not meant to show post content,
   but the person who posted the question may want to do that.
 * What I was actually looking for is a way to display the post thumbnail in my 
   grid theme and control the size. I’m going to try your code for that. Thanks.
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/a-tutorial-or-plugin-for-a-grid-based-theme/#post-1326032)
 * if you know how many columns you can get/or want, you can run a counter and add‘
   clear:left;’ to the first post on a new row; this prevents the sticking of the
   posts and keeps a bit more order even is the posts have different lengths.
 *     ```
       <?php if(have_posts()) :
       $counter = 0; $num_cols = 4; // set number of columns
       while(have_posts()) : the_post(); ?>
       <div class="post<?php if($counter%$num_cols == 0) echo ' clear'; ?>">
       <!-- all the html and other stuff to show post -->
       </div>
       <?php &counter++;
       endwhile;
       else : /*no post*/ endif; ?>
       ```
   
 * style.css:
 *     ```
       .post { width:150px; /*or any other fixed width*/
       float:left;
       margin-right: 10px; /*to separate the columns horizontally*/
        }
       .clear { clear:left; }
       ```
   
 * ___________
    a different approach to ‘grid style’ – to get a similar design as
   in the [http://www.creativedepart.com/](http://www.creativedepart.com/) link:(
   bare minimum code, without explanation)
 *     ```
       <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // for pagination
       $args = array(
       'posts_per_page' => 16, // optional to overwrite the dashboard setting
       'cat' => 0,
       'paged' => $paged
       ); query_posts($args);
       if (have_posts()) :
       $num_cols = 4; // set the number of columns here
       for ( $i=1 ; $i <= $num_cols; $i++ ) :
       echo '<div id="col">';
       $counter = $num_cols + 1 - $i;
       while (have_posts()) : the_post();
       if( $counter%$num_cols == 0 ) : ?>
       <!-- core post area;
       title, content, thumbnails, postmeta, etc -->
       <?php endif; $counter++;
       endwhile;
       rewind_posts();
       echo '</div>'; //closes the column div
       endfor;
       next_posts_link('&laquo; Older Entries');
       previous_posts_link('Newer Entries &raquo;');
       else:
       echo 'no posts';
       endif; wp_reset_query(); ?>
       ```
   
 * minimum css:
    `.col { width:150px; float:left; margin-right:5px; }`
 *  [Jonas Grumby](https://wordpress.org/support/users/ss_minnow/)
 * (@ss_minnow)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/a-tutorial-or-plugin-for-a-grid-based-theme/#post-1326033)
 * Thanks. I went with the fixed height and `overflow: hidden;` CSS property. I 
   like that better than having the posts be different heights. I didn’t use `clear:
   left;`. I just picked a width that would work out pretty nicely. The site is 
   [here](http://shirleyandthemastics.com/). It was just started today and is still
   fairly preliminary.

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

The topic ‘A tutorial or plugin for a grid based theme?’ is closed to new replies.

 * 5 replies
 * 4 participants
 * Last reply from: [Jonas Grumby](https://wordpress.org/support/users/ss_minnow/)
 * Last activity: [16 years, 1 month ago](https://wordpress.org/support/topic/a-tutorial-or-plugin-for-a-grid-based-theme/#post-1326033)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics