Grid layout for posts

On your post div, apply a float:left and define the appropriate width (half of the container’s width since you want two boxes) and height. The float:left will make the boxes move side by side to get the layout you want.

P.S.: Your vertical listing and your grid listing seems contradictory unless your vertical listing has been set to display chronologically, rather than the default reverse chrono order.

Let’s say this is how your posts are formatted in your Main Index Template:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php endwhile;else; ?>'

So, each post that comes out will be wrapped by a div of class "post".

Therefore, in your stylesheet, add these to the post div:
.post {
float: left;
width: 200px;
height: 100px;
}’
assuming that your total container (page) width is 400px.

This might or might not be sufficient as it depends from theme to theme.