Grid layout for posts (5 posts)

  1. ksaad
    Posted 9 years ago #

    Hello, to make this really simple, I made a diagram to show my idea, is it possible to make?


  2. ZMAng
    Posted 9 years ago #

    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.

  3. ksaad
    Posted 9 years ago #

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

  4. ZMAng
    Posted 9 years ago #

    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>
    <?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.

  5. ksaad
    Posted 9 years ago #

    Thank you. Much appreciated.

Topic Closed

This topic has been closed to new replies.

About this Topic