Multi-Column Grid-Style Posts in WordPress

RECOMMENDATION:
as this code can have its challenges, and is not always easy to apply, i would like to point to an easier to implement approach with the same results (depending on formatting):
Playing with columns – stacking posts in a grid.
There is also a newer article for creating posts in three columns.

Following question comes up regularly in the wordpress support forum: ‘i want to show my posts in three (four, five) columns, how can i do it?’

see the effect here in action: under pages ‘grid of posts’.

here, i am going  to present yet another solution: a flexible core structure to allow any number of columns with any number of rows, limited only by screen space, readability and fantasy…

Image may be NSFW.
Clik here to view.

a three column grid category template

the structure (for instance 3 columns, 4 rows, 12 or more posts):

 
1  5   9
2  6  10
3  7  11
4  8  12

the structure (for instance 3 columns, 4 rows, less than 12 posts, i.e. 7):

 
1  4  6
2  5  7
3 

the code is setup step by step:

1. setting of variables
2. query_posts
3. calculate rows
4. loop 1 – the columns
5. the wordpress loop – the rows
6. page navigation

here is the full code:

<?php get_header(); ?>
<?php
// code to display a number of posts in multi columns top-to-bottom left-to-right
?>
<?php global $query_string; ?>
<?php
$set_number_of_columns = 2; // enter numbers of columns here;
$set_number_of_rows = 4; // enter numbers of rows here
$set_showpost = $set_number_of_columns * $set_number_of_rows ;
//setup query with parameter for paged
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts($query_string.'&showposts='.$set_showpost.'&paged='.$paged);
// get number of posts for this,
$num_of_posts = $wp_query->post_count;
// make adjustment for paged to get three equaly long columns even on last paged page
// divide by $set_number_of_columns to get number per column,
// round up to next integer to make $ppc posts per column variable, or $set_number_of_rows whatever is smaller
$ppc = min(ceil($num_of_posts/$set_number_of_columns),$set_number_of_rows);
// calculates number of rows, i.e. showposts for the following query_posts and get_posts
?>
<?php for ( $col = 1; $col <= $set_number_of_columns; $col += 1) { ?>
<div class="col<?php echo $col;?>">
<?php
$row = 1;
$noffset = ($col -1) * $ppc + ($paged - 1) * $set_showpost ; //calculate offset parameter if paged
$posts = get_posts($query_string.'&numberposts='.$ppc.'&offset='.$noffset);
foreach ($posts as $post) : start_wp(); ?>
<div id="post-<?php the_ID(); ?>" class="post row-<?php echo ($row%2); ?>">
<!-- start of anything to do with post -->
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="storycontent">
<?php the_excerpt(__('(more...)')); ?>
</div>
<!-- end of anything to do with post -->
</div> <!-- end #post -->
<?php
$row++;
endforeach; ?>
</div>
<?php } ?>
<?php // close the for-loop // ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php get_footer(); ?>

the naming of the css classes is:
class .col1 for the first column; class .col2 for the second column; and so forth.
same thing for the rows: class .row1 for the posts in first row, on so on.
going with this code is the css:

.col1, .col2 {float:left; width:49%; }

you can see the code in action: under pages ‘grid of posts’.
the effect ia achieved by giving each post a fixed height; and using a bit of javascript trickery.