Display post plugins in Wordpress

https://displayposts.com/2019/01/04/post-grid-styling/

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 );
 }
}