Add Masonry and Grid Layouts to Your WordPress Site with Just CSS

Ever wanted to jazz up how your posts are displayed on your WordPress home page and archives?

What if you could display your posts using the masonry (Pinterest) approach or maybe a grid layout, all just by adding a snippet of CSS?

No plugins, shortcodes, template changes, assigning pages as the home page. Just pure CSS.

Masonry and grid layouts are all possible with pure CSS, no markup changes

Continue reading, or jump ahead using these links:

Preparations for Adding Masonry and Grid Layouts to Your Site
Giving Your Posts The Pinterest Masonry Look
Laying Out Posts In A Grid
Adding the Custom CSS to Your Site

Preparations for Adding Masonry and Grid Layouts to Your WordPress Site

These solutions are based purely on CSS and so, not surprisingly, they rely heavily on the HTML mark-up on your site to work without modification.

The CSS used has been designed (and tested) with the default themes. This means that the CSS has a couple of expectations:

Classes exist on the body element that describe the type of page (e.g. home, blog, archive, search)
Post lists are collections of article elements, complete with header wrapped in a div with the id of content

If you use a default theme then you will be able to use the CSS without modification. Even if you don’t, you might find that your theme uses similar enough markup that you can still use the CSS as is. For example, the Eighties theme uses virtually the same markup as the default themes.

If your theme doesn’t use the same markup – the easiest way to tell is to check the page source for the classes and ids referenced in the CSS – then you can still use the CSS, you’ll just have to change the classes and the ids to match your markup.

Choosing Where To Apply The Styling

You may decide that you only want to apply your chosen styling to certain pages.

WordPress makes this really easy as it applies page-specific classes to the body element such as blog, home, archive and search, so you simply need to code your CSS for each of the relevant classes.

For example, if you want to apply the styling to just the home page then your CSS will look something like:

body.blog article { styles go here… }

To apply the styling to the home page and the archive (category) pages:

body.blog article, body.archive article { styles go here… }

To apply the styling to just the search results:

body.blog search { styles go here… }

Again, this does depend on your theme following WordPress’ theming recommendations.

Browser Compatibility

Being CSS3, these techniques are not going to work across all platforms and browsers.

I have tested and confirm that they work on the latest versions of Chrome and Safari (both on OS X) and on iOS (5+). The various CSS websites also suggest that IE10 will also have no problems.

Outside of these browsers (including IE9), your mileage will vary but it’s worth remembering that the fallback is your current styling, so visitors using older browsers will simply not notice any difference.

If you find the styles work successfully on a platform not mentioned (particularly Windows), then let us know in the comments.

Enough of the disclaimers, then, let’s look at how to spruce up your post listings.

Giving Your Posts The Pinterest Masonry Look

Popularized by Pinterest, masonry works great with posts of differing heights

There are plenty of WordPress themes and a handful of plugins that display posts in a Pinterest-style masonry format. But with CSS3, you can simply add some additional styles to your WordPress site and get the same effect.

This solution, inspired by Rahul Arora’s post on W3Bits, is based on CSS3’s support for the column property. This property will split content across the defined number of columns and whilst its creation was likely inspired more by the idea of flowing text across columns newspaper-style, it’s just as useful for a masonry layout.

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

In the default layouts, posts are output as article elements wrapped in a div with a id of content.

The CSS:

1. Sets the number of columns on the #content wrapper using the column-count property – in this case 4. It also sets the column-gap. You’ll notice the use of -moz- and -webkit- for Firefox and Safari.

2. Turns the article elements into the bricks, using inline-block and setting a width to 100%.

3. Ensures that the page header and the navigation sits in its own “row” by specifying that these elements span all columns

Just to keep things tidy you might also consider adding the following:

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}

h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

This just puts a margin around the content and ensures that long words in titles don’t throw out the formatting (useful for any theme, not just here).

Making It Responsive

One disadvantage with a column approach is that it quickly degrades as the screen size gets smaller.

What we want to do is to manipulate the number of columns so that the article elements get a sensible amount of screen real estate to maintain the bricks’ integrity and visual appeal. So, let’s add some media queries to change the number of columns based on the screen size:

@media only screen and (max-width : 1024px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 768px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 480px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

As you can see, we only need to change the column-count property (and its derivatives) for each query.

These 4 breakpoints, 3 of which will work across all platforms (simply resize your browser window to see them take affect) and 1 which is specifically for a tablet in portrait mode.

Here’s the masonry styling on an iPad and iPhone:

Making the number of columns respond to screen size is easy

You can (and should), of course, go further and add more style to the bricks to improve the visual appeal but just 3 CSS statements to turn your post listings into a masonry wall is pretty impressive!

Laying Out Posts In A Grid

Grids bring order and uniformity to your post lists

If you like more uniformity and order than masonry provides, then you might be interested in laying out your posts in a grid.

Grids are very, very easy to implement but definitely work best when the featured images are all the same size, otherwise you can end up with plenty of whitespace padding out the shorter “cells”.

This time the CSS is even shorter, simply relying on styling the article elements:

/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

That’s all that’s absolutely necessary. Again, we are making use of inline-block and ensuring that the article content (title, featured image, excerpt) are vertically aligned.

The important property is the width as this determines the number of “columns”. I’ve used 32.5% as the initial value (using 33% can lead to premature wrapping) which will provide for 3 columns. Obviously, if you wanted 4 columns then you’d use 24.5%, 5 columns 19.5%, etc.

Adding Responsive-ness

Just like our masonry styling, grids are going to need to be responsive if they are to maintain their effectiveness.

As it is the width property that determines the number of columns then that’s the property that will be changed in the various media queries.

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 768px) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 480px) {

body.blog article, body.archive article {
width: 100%;
}
}

Just 3 queries this time as I only started with 3 columns. If you decide to start with more columns then you may well want to add a breakpoint of max-width: 1024px to set the width to 32.5% (3 columns).

This will result in:

2 columns on a tablet in portrait mode
2 columns when the screen size is a maximum width of 768px
1 column when the screen size is a maximum width of 480px

These breakpoints will cover both tablets and smartphones and resizing of the browser window.

Here’s the grid layout on an iPad and iPhone:

Just a couple of media queries ensures that the grid responds to changing screen size

Grids, a bit more orderly than masonry but really do require consistency and rigour when it comes to featured image size to be at their most effective.

Adding the Custom CSS to Your Site

There are a number of options when it comes to injecting your chosen custom CSS into your WordPress site. If your theme doesn’t include the ability to add custom CSS, then your choices are:

Child Theme – create a child theme and add the CSS to the stylesheet
Plugin – add your chosen styling to a new CSS file and create a plugin that uses the wp-enqueue-style function, perhaps conditionally based on the page being generated, to enqueue the new file
Edit the current theme’s stylesheet – don’t, really, just don’t
Use a custom CSS plugin – there are a number of plugins that will allow you to add custom CSS to your site via the WordPress admin interface (the aptly named Simple Custom CSS plugin is one such plugin)

I like using the Custom CSS plugin. It’s quick and easy to set up, makes testing a breeze and is equally quick and easy to remove the CSS from your WordPress site (clear the editor or uninstall the plugin).

CSS, The Pathway To WordPress Zen

The wonderful CSS Zen Garden has been proving for many years that the look and feel of a site can be substantially altered without a single change to the markup but by changing the CSS.

Whilst not anywhere near the same level, these two techniques prove that changing the look and feel of your WordPress site is also entirely possible without needing to alter templates, using shortcodes or developing child themes.

Just a little bit of CSS.

Editor’s Note: This post has been updated for accuracy and relevancy. [Originally Published: July 2014 / Revised: February 2022]