Post Grid View

 In Posts & Pages

Lets say your HTML looks like this:

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

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

Learn how to add custom css style for recent posts – click here @ https://www.wp-code.uk 

Nuno Sarmento
Freelance WordPress Developer
Recommended Posts

Leave a Comment

Start typing and press Enter to search