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.

Internet Explorer

CSS Grid works in all modern browsers. Internet Explorer is not a modern browser, and is no longer supported by Microsoft.

If you would like to display your posts in a grid in IE, you should not use CSS grid. We can accomplish something similar using older, float-based CSS.

The CSS below will display posts in 3 columns. If you want to use a different number of columns, change the listing-item width and the “3” in nth-child. The width of each item plus the margin between them should add up to 100% (ex: 32% + 2% + 32% + 2% + 32% = 100%).

Note: only use one set of CSS from this page. Don’t add both snippets or else your post listings will look broken in all browsers.

/* Grid style */
@media (min-width: 767px) {

	.display-posts-listing.grid {
		overflow: hidden;
		width: 100%;
	}

	.display-posts-listing.grid .listing-item {
		float: left;
		width: 32%;
		margin-left: 2%;
	}

	.display-posts-listing.grid .listing-item:nth-child(3n+1) {
		clear: both;
		margin-left: 0;
	}
}

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

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