Add Masonry and Grid Layouts to Your WordPress Web site with Simply CSS

Ever wished to jazz up how your posts are displayed in your WordPress house web page and archives?

What if you could possibly show your posts utilizing the masonry (Pinterest) strategy or possibly a grid format, all simply by including a snippet of CSS?

No plugins, shortcodes, template adjustments, assigning pages as the house web page. Simply pure CSS.

Masonry and grid layouts are all attainable with pure CSS, no markup adjustments

Proceed studying, or bounce forward utilizing these hyperlinks:

Preparations for Including Masonry and Grid Layouts to Your Web site
Giving Your Posts The Pinterest Masonry Look
Laying Out Posts In A Grid
Including the Customized CSS to Your Web site

Preparations for Including Masonry and Grid Layouts to Your WordPress Web site

These options are primarily based purely on CSS and so, not surprisingly, they rely closely on the HTML mark-up in your website to work with out modification.

The CSS used has been designed (and examined) with the default themes. Because of this the CSS has a few expectations:

Lessons exist on the physique aspect that describe the kind of web page (e.g. house, weblog, archive, search)
Submit lists are collections of article parts, full with header wrapped in a div with the id of content material

For those who use a default theme then it is possible for you to to make use of the CSS with out modification. Even if you happen to don’t, you would possibly discover that your theme makes use of comparable sufficient markup that you could nonetheless use the CSS as is. For instance, the Eighties theme makes use of nearly the identical markup because the default themes.

In case your theme doesn’t use the identical markup – the simplest strategy to inform is to verify the web page supply for the courses and ids referenced within the CSS – then you may nonetheless use the CSS, you’ll simply have to alter the courses and the ids to match your markup.

Selecting The place To Apply The Styling

Chances are you’ll resolve that you simply solely wish to apply your chosen styling to sure pages.

WordPress makes this very easy because it applies page-specific courses to the physique aspect corresponding to weblog, house, archive and search, so that you merely have to code your CSS for every of the related courses.

For instance, if you wish to apply the styling to simply the house web page then your CSS will look one thing like:

physique.weblog article { kinds go right here… }

To use the styling to the house web page and the archive (class) pages:

physique.weblog article, physique.archive article { kinds go right here… }

To use the styling to simply the search outcomes:

physique.weblog search { kinds go right here… }

Once more, this does rely in your theme following WordPress’ theming suggestions.

Browser Compatibility

Being CSS3, these strategies will not be going to work throughout all platforms and browsers.

I’ve examined and make sure that they work on the most recent variations of Chrome and Safari (each on OS X) and on iOS (5+). The varied CSS web sites additionally counsel that IE10 may even haven’t any issues.

Exterior of those browsers (together with IE9), your mileage will range but it surely’s value remembering that the fallback is your present styling, so guests utilizing older browsers will merely not discover any distinction.

For those who discover the kinds work efficiently on a platform not talked about (significantly Home windows), then tell us within the feedback.

Sufficient of the disclaimers, then, let’s take a look at spruce up your put up listings.

Giving Your Posts The Pinterest Masonry Look

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

There are many WordPress themes and a handful of plugins that show posts in a Pinterest-style masonry format. However with CSS3, you may merely add some extra kinds to your WordPress website and get the identical impact.

This answer, impressed by Rahul Arora’s put up on W3Bits, relies on CSS3’s assist for the column property. This property will break up content material throughout the outlined variety of columns and while its creation was seemingly impressed extra by the concept of flowing textual content throughout columns newspaper-style, it’s simply as helpful for a masonry format.

/* Masonry Customized CSS  */

/* Masonry container */
physique.weblog div#content material, physique.archive div#content material {
-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 baby parts */

physique.weblog article, physique.archive article {
background-color: #eee;
show: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

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

Within the default layouts, posts are output as article parts wrapped in a div with a id of content material.

The CSS:

1. Units the variety of columns on the #content material wrapper utilizing the column-count property – on this case 4. It additionally units the column-gap. You’ll discover the usage of -moz- and -webkit- for Firefox and Safari.

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

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

Simply to maintain issues tidy you may additionally contemplate including the next:

/* Some advert hoc CSS helpful for a lot of themes */
physique.archive .site-content,
physique.weblog .site-content {
margin: 1em;
}

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

This simply places a margin across the content material and ensures that lengthy phrases in titles don’t throw out the formatting (helpful for any theme, not simply right here).

Making It Responsive

One drawback with a column strategy is that it shortly degrades because the display screen dimension will get smaller.

What we wish to do is to control the variety of columns in order that the article parts get a smart quantity of display screen actual property to keep up the bricks’ integrity and visible attraction. So, let’s add some media queries to alter the variety of columns primarily based on the display screen dimension:

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

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

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

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

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

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

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

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

As you may see, we solely want to alter the column-count property (and its derivatives) for every question.

These 4 breakpoints, 3 of which is able to work throughout all platforms (merely resize your browser window to see them take have an effect on) and 1 which is particularly for a pill in portrait mode.

Right here’s the masonry styling on an iPad and iPhone:

Making the variety of columns reply to display screen dimension is straightforward

You’ll be able to (and will), after all, go additional and add extra model to the bricks to enhance the visible attraction however simply 3 CSS statements to show your put up listings right into a masonry wall is fairly spectacular!

Laying Out Posts In A Grid

Grids carry order and uniformity to your put up lists

For those who like extra uniformity and order than masonry gives, you then could be occupied with laying out your posts in a grid.

Grids are very, very straightforward to implement however positively work finest when the featured photographs are all the identical dimension, in any other case you may find yourself with loads of whitespace padding out the shorter “cells”.

This time the CSS is even shorter, merely counting on styling the article parts:

/* Grid Structure Customized CSS */
physique.weblog article, physique.archive article {
width: 32.5%;
show: inline-block;
vertical-align: prime;
text-align: left;
margin-bottom: 10px;
place: relative;
}

That’s all that’s completely essential. Once more, we’re making use of inline-block and guaranteeing that the article content material (title, featured picture, excerpt) are vertically aligned.

The essential property is the width as this determines the variety of “columns”. I’ve used 32.5% because the preliminary worth (utilizing 33% can result in untimely wrapping) which is able to present for 3 columns. Clearly, if you happen to wished 4 columns you then’d use 24.5%, 5 columns 19.5%, and so forth.

Including Responsive-ness

Similar to our masonry styling, grids are going to should be responsive if they’re to keep up their effectiveness.

As it’s the width property that determines the variety of columns then that’s the property that will likely be modified within the numerous media queries.

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

physique.weblog article, physique.archive article {
width: 49%;
}
}

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

physique.weblog article, physique.archive article {
width: 49%;
}
}

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

physique.weblog article, physique.archive article {
width: 100%;
}
}

Simply 3 queries this time as I solely began with 3 columns. For those who resolve to start out with extra columns then chances are you’ll effectively wish to add a breakpoint of max-width: 1024px to set the width to 32.5% (3 columns).

It will lead to:

2 columns on a pill in portrait mode
2 columns when the display screen dimension is a most width of 768px
1 column when the display screen dimension is a most width of 480px

These breakpoints will cowl each tablets and smartphones and resizing of the browser window.

Right here’s the grid format on an iPad and iPhone:

Simply a few media queries ensures that the grid responds to altering display screen dimension

Grids, a bit extra orderly than masonry however actually do require consistency and rigour on the subject of featured picture dimension to be at their best.

Including the Customized CSS to Your Web site

There are a variety of choices on the subject of injecting your chosen customized CSS into your WordPress website. In case your theme doesn’t embody the flexibility so as to add customized CSS, then your decisions are:

Youngster Theme – create a baby theme and add the CSS to the stylesheet
Plugin – add your chosen styling to a brand new CSS file and create a plugin that makes use of the wp-enqueue-style operate, maybe conditionally primarily based on the web page being generated, to enqueue the brand new file
Edit the present theme’s stylesheet – don’t, actually, simply don’t
Use a customized CSS plugin – there are a variety of plugins that can permit you to add customized CSS to your website through the WordPress admin interface (the aptly named Easy Customized CSS plugin is one such plugin)

I like utilizing the Customized CSS plugin. It’s fast and straightforward to arrange, makes testing a breeze and is equally fast and straightforward to take away the CSS out of your WordPress website (clear the editor or uninstall the plugin).

CSS, The Pathway To WordPress Zen

The fantastic CSS Zen Backyard has been proving for a few years that the feel and appear of a website could be considerably altered and not using a single change to the markup however by altering the CSS.

While not anyplace close to the identical degree, these two strategies show that altering the feel and appear of your WordPress website can be solely attainable with out needing to change templates, utilizing shortcodes or creating baby themes.

Just a bit little bit of CSS.

Editor’s Be aware: This put up has been up to date for accuracy and relevancy. [Originally Published: July 2014 / Revised: February 2022]