Build a grid layout for WordPress using WP_Query (video tutorial: https://youtu.be/MF0egfd5LwU)

johnmorris-grid.php

<?php
/*
  Plugin Name: John Morris Grid
  Plugin URI: http://johnmorrisonline.com/
  Description: Demo plugin that displays posts in a grid format via shortcode
  Version: 1.0.1
  Author: John Morris
  Author URI: http://johnmorrisonline.com
  Text Domain: johnmorris-grid
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Domain Path: /lang
 */
 
 if ( ! class_exists( 'John_Morris_Grid' ) ) {
   class John_Morris_Grid {
      /**
       * Init
       * 
       * Initializes the plugin
       */
      public function init() {
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
        add_image_size( 'jmogrid', 220, 220, true );
        add_shortcode( 'jmogrid', array( $this, 'shortcode_handler' ) );
      }
      
      /**
       * Enqueue Scripts and Styles
       * 
       * Enqueues styles and scripts used throughout the plugin
       */
      public function enqueue() {
        wp_enqueue_style('jmogrid', plugins_url( '/css/style.css', __FILE__) );
      }
      
      /**
       * Shortcode Handler
       * 
       * Handles shortcode processing
       */
      public function shortcode_handler($atts) {
        $atts = shortcode_atts(
          array(
            'posts_per_page' => 100
          ), $atts, 'jmogrid'
        );
        
        return $this->grid($atts);
      }
      
      /**
       * Grid Builder
       * 
       * Builds the grid
       * 
       * @param array $args Query argumenst passed to WP_Query
       *
       * @return string $html The HTML output
       */
      public function grid($args) {
        $grid = new WP_Query($args);
        
        ob_start(); ?>
        
        <div id="jmogrid">
        
        <?php $count = 1; if ( $grid->have_posts() ) : while( $grid->have_posts() ) : $grid->the_post(); ?>
          <?php 
            $modulus = $count % 5; 
            
            if ( $modulus == 1 ) {
              $class = 'first';
            } elseif ( $modulus == 0 ) {
              $class = 'last';
            }
          ?>
          <div class="jmogrid-item <?php echo $class; ?>">
            <?php if ( has_post_thumbnail() ) : ?>
              <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('jmogrid'); ?>
              </a>
            <?php endif; ?>
            <h4>
              <a href="<?php the_permalink(); ?>"><?php echo wp_trim_words(get_the_title(), 6); ?></a>
            </h4>
            <p class="jmogrid-meta">
              <?php _e( 'Written by', 'johnmorris-grid' ); ?> <?php the_author(); ?><br />
              <?php echo get_the_date( get_option( 'date_format' ) ); ?>
            </p>
            <p><?php echo wp_trim_words( get_the_content(), 10); ?></p>
          </div>
          
        <?php unset($class); $count++; endwhile; wp_reset_postdata(); endif; ?>
        
        </div>
        
        <?php return ob_get_clean();
      }
   }
   
   // Instantiate Class
   $JohnMorrisGrid = new John_Morris_Grid;
   
   // Hook in
   add_action( 'init', array( $JohnMorrisGrid, 'init' ) );
 }

style.css

/* John Morris Grid CSS */

#jmogrid {
  overflow: hidden;
  clear: both;
}

.jmogrid-item {
  overflow: hidden;
  box-sizing: border-box;
  width: 18%;
  float: left;
  margin: 20px 1%;
  border: 1px solid #e4e4e4;
  border-radius: 3px;
}

.jmogrid-item.first {
  width: 19%;
  margin-left: 0;
}

.jmogrid-item.last {
  width: 19%;
  margin-right: 0;
}

.jmogrid-item h4,
.jmogrid-item p {
  margin: 0;
  padding: 20px;
}

.jmogrid-item h4 {
  padding-bottom: 0;
}

.jmogrid-item p {
  font-size: 1.5rem;
}

p.jmogrid-meta {
  font-size: 1.2rem;
  color: #777;
  padding-bottom:0;
  padding-top: 5px;
}