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

Newsletter
Join over 280,000 independent website owners

The next person to join our monthly newsletter gets a 25% off coupon!

We guarantee 100% privacy. Your information will not be shared.

This entry was posted in . Bookmark the permalink.

Posted by , at Graph Paper Press

Thad is the founder of Theme.Works and Graph Paper Press. Previously, he produced online multimedia and documentary projects for USA Today including the inauguration of President Barack Obama and many others. He lives in Brooklyn, NY with his wife Abby.

  • Google
  • Blog
  • Instagram

12 thoughts on “Create Four Column Grid Template”

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

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

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

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

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

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

Leave a Reply