Here's another attempt to get my posts into a grid:

index.php The page that loads all the posts.

<?php
get_header();?>

<div class="container">
    <?php get_template_part('includes/section','index');?>
</div>

<?php get_footer();?>

section-index.php Contains the pieces to display the image, title and excerpt.

<?php if( have_posts() ): while( have_posts() ): the_post();?>

<div class="grid">
    <div class="image">
        <img src="<?php the_post_thumbnail_url('');?>" width="300" height="300"/>
    </div>
    <div class="title">
        <h2><?php the_title();?></h2>
    </div>
    <div class="excerpt">
        <?php the_excerpt();?>
    </div>
    <div class="read">
        <a href="<?php the_permalink();?>">read more</a>
    </div>
</div>

<?php endwhile; else: endif;?>
        

app.scss .grid groups the pieces together, .container positions all the posts.

.grid {
  background: pink;
  max-width: 17%;
  float: left;
}

.container {
  position: absolute;
  top: 10%;
  left: 10%;
}

The problem here is that I can't figure out how to center the entire grid together because the .container causes the footer to be ignored and bounces back up under the header.

Alternative Method: Using WordPress built in Masonry

Here's what I've managed to achieve to get the masonry working. I am using the same code within index.php.

masonry.js

(function( $ ) {
    $(function() {
        var container = document.querySelector('.js-masonry');
        var msnry;
        imagesLoaded( container, function() {
            msnry = new Masonry( container, {
                itemSelector: '.item-masonry',
                isFitWidth: true
            });
        });
    });
});

app.scss

.js-masonry {
  border: solid 5px green;
      position: relative;
      max-width: 1080px;
      margin: auto;
      padding: 10px;
}

.js-masonry:after {
  content: '';
  display: block;
  clear: both;
}

.item-masonry {
  border: solid 5px pink;
}

section-index.php

<div class="js-masonry">
    <?php if( have_posts() ): while( have_posts() ): the_post();?>
        <div class="item-masonry">
        <a href="<?php the_permalink();?>"><img src="" width="310" height="310"></a>
            <h2><?php the_title();?></h2>
        </div>
    <?php endwhile; else: endif;?>
</div>

The masonry works, but:

1. The .item inside the .js-masonry is leaning on the left side rather than within the center, resulting a huge space on the right side.
2. I'm unable to get the gutter working by adding it within masonry.js. I want even space between all the .item.

Any solution on how I can resolve these two problems?