Beautiful Grid Based Blog Designs + Why They Are Awesome

Grid based design is a clean way to lay out as much content as possible on one page, while keeping it structured and eye-appealing. Myself am a big fan of those grid based layouts and I am happy to see that more and more blogs are heading this way.

In this article, I will give you 8 beautiful WordPress based sites that use a grid to display their content. Together with the inspiration, I will explain why certain elements on those blogs work and why some don’t work.

1. Spanish & Portuguese

Here is your typical grid layout, with some graphical and typography additions. The design in the header looks lovely, but what most grabbed my attention was the typography. The designers didn’t go the easy way, they tried different heading styles and that turned out quite pretty.

One thing I don’t really like is the width of the page. In my 1280×1024 screen resolution, it just fits. What about those smaller screens like 1024×768? They aren’t able to view important information like “contact”. Another thing that I think they should improve, is the white space next to the “search this website” box. That looks a bit odd in a layout filled with content & typography.

2. Kineda

What I really enjoy about this grid based blog is the fact it doesn’t use white as its background. Grid designs always tend to use white as their background, but with this design you see that does not have to be the case. I really like the slider with the larger image + description, combined with the 4 smaller thumbnails. That’s a way to perfectly feature the content you want to have a spotlight on.

The only aspect of this grid layout that I don’t really like are the blue and way-too-little “headings”. I really had to focus on those small letters to read what it said.

3. ErskineDesign Blog

The Erskine Design blog uses a grid layout of three columns. Those columns all have the same width and the pictures that are on top of each news item, have the same dimensions too. That makes the whole layout flow together. To have more typography options for their news titles, they have used sIFR3, which make the whole thing look perfectly balanced.

4. IdeasOnIdeas

This is an example of how typography can make or break a layout. On this typical-structured blog, the grid principles are implanted nicely and the typography give that little extra. This is a blog I could have developed: we have the same typography preferences!

5. Tennessee Winter

Here’s not your typical grid layout. This once uses a great background image that reflect exactly what the blog is all about: the winter. With typography and a slider to display their featured pictures, they have created a blog that breaths the winter.

One thing I can remark is the whole right sidebar they barely use. Under the calendar, we have a whole lot of white space which I think can be used a lot better.

6. The Darling Tree

What a design! Yet again, the typography is great and the color scheme has been chosen perfectly.

One thing that grabbed my attention is the fact the most left column is somewhat oddly placed. The margin between that column and the content area is a bit larger compared to the margin’s between the content and the most right column. When you check out other pages on the site, you’ll see that it’s everywhere. I don’t know why they have did that.

7. Loodo

A grid design with 4 columns and many inspiring colors. This blog shows how you can use illustrations and traditional gaming elements to a beautiful layout, while keeping the grid in tact. They have done a good job.

For a 4 column grid layout, I think they have to a collection of content that is too small. You can use your left and right sidebars much better.

8. Blog.Critical

Blog.Critical uses a gray background and that is kind of unique. Usually, it’s white or black. They have implanted an awesome illustration in the header that spreads all the way over the content. What remarkable about this design is that they build their grid when scrolling down: Header – 2 columns, Content – 3 columns and the footer has 4 columns.

One point of criticism is the alignment of the content area. It kind-of fall outside the grid and I think, when it was aligned to the same grid, it would have been better for the overall look.

Leave a Reply