Support » Themes and Templates » Grid layout for posts

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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.

    I think I got your idea. A sample code would be nice?

    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.

    Thank you. Much appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Grid layout for posts’ is closed to new replies.