Post Grid styling

You can create a great looking, column-based grid of posts with a bit of CSS.

The next version of Display Posts will make it even easier to add a grid of posts. We’re building a custom block for the new content editor (Gutenberg) that will allow you to select different layout options.

Example

Shortcode

[display-posts image_size="medium" wrapper="div" wrapper_class="display-posts-listing grid" meta_key="_thumbnail_id"]
  • Use the image_size parameter to define what size image to use. You can use the WordPress core image sizes (thumbnail, medium, large) or any custom image sizes added by your theme.
  • Set wrapper="div" so the posts aren’t in a list.
  • Set wrapper_class="display-posts-listing grid" so we can add CSS targeted to just this listing rather than all of them.
  • [Optional] set meta_key="_thumbnail_id" to exclude posts that don’t have featured images.
  • Set posts_per_page to the number of articles you’d like to include. Pick a number that divides well across all breakpoints.

CSS

Note: WordPress will say that there is an error with grid-gap . This is actually an issue with WordPress not recognizing modern CSS properties (see here).

You can safely ignore the warnings it provides regarding the CSS shown below.

This code snippet goes in Appearance > Customize > Additional CSS or your theme’s stylesheet.

/* Grid style */
.display-posts-listing.grid {
	display: grid;
	grid-gap: 16px;
}

.display-posts-listing.grid .title {
	display: block;
}

.display-posts-listing.grid img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
}

@media (min-width: 600px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 1024px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}
  • You can modify the @media (min-width: xxx)to change when the number of columns change.
  • You can modify the repeat( X, 1fr ) to set the number of columns at that breakpoint.
  • Modify the grid-gap to change the space between rows and columns.

Published by Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributor to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.