Create Four Column Grid Template

Grids. I know you love them! They are one of the most requested design features which we typically add to most of our WordPress photo themes. In the following tutorial, I show you how to use CSS “pseudo classes” to achieve a full-page four column grid. With a few small tweaks, you could adapt the template to support any number of columns that you prefer. This comes in handy when building archive pages for portfolio templates. Here is what the final result will look like:

Lets say your HTML looks like this:

<div class="columns">
 <div class="column"></div>
 <div class="column"></div>
 <div class="column"></div>
 <div class="column"></div>
</div>

Here is the CSS for the four column grid that you could add to your stylesheet:

.column { float: left; margin: 0 2.5% 1em 0; width: 22.5%; }
.column:nth-child(4n) { margin-right: 0; }
.column:nth-child(4n+1) { clear: left; }

Pseudo classes allow us to target specific CSS selectors. In our example above, we’re using pseudo classes to check for the fourth column (.column:nth-child(4n)) to remove the right margin on that specific column and for the first, fifth, ninth columns (.column:nth-child(4n+1) to clear the float left property for proper column stacking. This ensures our grid properly fills the containing div. For more info on pseudo classes, see this CSS Tricks article.

Disclaimer: CSS pseudo classes only work in modern browsers. They don’t work in IE versions before 9.

You want 5 columns? No problem! Change the 4n to 5n. Then, change the .columns margin to margin: 0 2% 1em 0; and the width to width: 18%;.

To take this concept further and apply it to WordPress themes, I’ve attached a page template called “Grid” that you can add to your active theme folder to create the layout seen above. The template is well commented, so please check them out for tweaking the template to your liking. Enjoy!

Download Grid Page Template

12 responses to “Create Four Column Grid Template”

  1. JJs Avatar
    JJs

    I’m not able to integrate twitter into my Mixfolio theme’s option panel. Nothing happens and it won’t save the twitter account I add either. How to resolve this?

  2. Bear Family Avatar
    Bear Family

    This is great! I have added it to my site, but before the grid itself, the posts (in full) are displayed before it. What part of the code do I need to adjust to remove this completely and have the grid only?

    See here: http://bearfamily.com.au/category/blog/

    Thanks.

    1. Graph Paper Press Avatar

      Not sure without looking at your theme. Remove the loop before the grid?

  3. ajmal017 Avatar
    ajmal017

    is there a way we can make this responsive… ??

  4. Karthi Avatar
    Karthi

    How to Add this Only for Specific Category.. Example : Videos or Photo Gallery Category only? How to get same image size in all post or How to use Timbthumb??

  5. shannon Avatar
    shannon

    Hi, I downloaded the page template and so far it looks like what I was looking for. However, it is pulling blog posts and I would like it to pull certain pages so I can make a “communities” page. I also like the idea of a preview using the drop cap. Is there a way to make this happen? I am really new so adding the page template for me was huge! Is there some css or something to add for this? Also is this responsive?

  6. Shannon Anderson Avatar
    Shannon Anderson

    Hi, I downloaded the page template and so far it looks like what I was looking for. However, it is pulling blog posts and I would like it to pull certain pages so I can make a “communities” page. I also like the idea of a preview using the drop cap. Is there a way to make this happen? I am really new so adding the page template for me was huge! Is there some css or something to add for this? Also is this responsive?

  7. Barsy Avatar
    Barsy

    Hi, this is a fantastic tutorial! I really like the simplicity of this template. I am having a bit of trouble filtering my content by category. Any suggestions?

  8. Bettina Avatar
    Bettina

    Great tutorial – thanks a lot! I would like to translate it to german and use it on my blog. Of course I will link back to your site. Would it be ok for you?

    Regards from Berln, Germany

  9. rohit Avatar
    rohit

    Previous and next post pgaed is not working

  10. billy pilgrim Avatar
    billy pilgrim

    I’m posting event notices on a church blog . We regularly have at least four different kinds of events happening on the same day or within days of each other, but whatever event gets posted most recently shoves all the others down the blog out of immediate sight. I’d like to modify the theme layout so that all upcoming events can remain in sight at the top next to each other. I’m thinking not a grid, but four distinct columns with headings – Sunday Services, Arts, Charity, and Meetings – displayed side by side. Either each column would display its own dedicated blog, or in one blog, there would be some mechanism for choosing the column in which to place each event post. Seems to me this would be very useful for any group with multiple events that need to be publicized at the same time. Any help appreciated. PS I’m an HTML/CSS veteran but a complete newbie to WordPress.

  11. Neto Flores Avatar
    Neto Flores

    I don’t really know how to add this zip file into my theme, can you explain that to me?

Leave a Reply

Your email address will not be published. Required fields are marked *