Title: Grid layout for posts
Last modified: August 18, 2016

---

# Grid layout for posts

 *  [ksaad](https://wordpress.org/support/users/ksaad/)
 * (@ksaad)
 * [19 years, 9 months ago](https://wordpress.org/support/topic/grid-layout-for-posts/)
 * Hello, to make this really simple, I made a diagram to show my idea, is it possible
   to make?
 * [http://img132.imageshack.us/img132/7501/untitledzs3.png](http://img132.imageshack.us/img132/7501/untitledzs3.png)

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

 *  [zmang](https://wordpress.org/support/users/zmang/)
 * (@zmang)
 * [19 years, 9 months ago](https://wordpress.org/support/topic/grid-layout-for-posts/#post-444548)
 * 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.
 *  Thread Starter [ksaad](https://wordpress.org/support/users/ksaad/)
 * (@ksaad)
 * [19 years, 9 months ago](https://wordpress.org/support/topic/grid-layout-for-posts/#post-444555)
 * I think I got your idea. A sample code would be nice?
 *  [zmang](https://wordpress.org/support/users/zmang/)
 * (@zmang)
 * [19 years, 9 months ago](https://wordpress.org/support/topic/grid-layout-for-posts/#post-444558)
 * 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.
 *  Thread Starter [ksaad](https://wordpress.org/support/users/ksaad/)
 * (@ksaad)
 * [19 years, 9 months ago](https://wordpress.org/support/topic/grid-layout-for-posts/#post-444691)
 * Thank you. Much appreciated.

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

The topic ‘Grid layout for posts’ is closed to new replies.

## Tags

 * [grid](https://wordpress.org/support/topic-tag/grid/)
 * [posts](https://wordpress.org/support/topic-tag/posts/)

 * 4 replies
 * 2 participants
 * Last reply from: [ksaad](https://wordpress.org/support/users/ksaad/)
 * Last activity: [19 years, 9 months ago](https://wordpress.org/support/topic/grid-layout-for-posts/#post-444691)
 * Status: not a support question

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics