Cacher is the code snippet organizer for pro developers

/** https://gist.github.com/neilgee/d7870d1f59f63f4bacfb#file-masonry-css **/
.home .entry {
	background: #f8f9fa;
	margin: 0 1.5% 30px !important;
	padding: 3%;
  	width: 100%;  
}
/* 3 Up on devices ipad portrait plus */
@media only screen and (min-width: 768px) {
	.home .entry {
	width: 30%;  
	}
}

//https://gist.github.com/neilgee/d7870d1f59f63f4bacfb#file-masonry-scripts-php
//Enqueue the built in WordPress jQuery Masonry script and create a initiate file which targets our .home .entry posts.
<?php

//Masonry load scripts
function wpb_masonry_scripts_styles() {
	wp_enqueue_script ( 'jquery-masonry');
	wp_enqueue_script ( 'masonry-init' , get_stylesheet_directory_uri() . '/js/masonry-init.js', array('jquery-masonry'), '1', true );
}

add_action( 'wp_enqueue_scripts', 'wpb_masonry_scripts_styles' ); 

//https://gist.github.com/neilgee/d7870d1f59f63f4bacfb#file-masonry-pagination-js
//The pagination is an issue in Genesis as it is also masonified (don’t know if that is a legit term) because it shares the same container as the posts – here is a jQuery/CSS hack on that.
//shift pagination out of container
jQuery(function( $ ){
	$('.archive-pagination').insertAfter(".content-sidebar-wrap");
});

//ref- http://api.jquery.com/insertafter/

/**https://gist.github.com/neilgee/d7870d1f59f63f4bacfb#file-masonry-pagination-css*/
/**override masonry*/
.archive-pagination {
	position: relative !important;
	top: 0 !important;
}

// https://gist.github.com/neilgee/d7870d1f59f63f4bacfb#file-masonry-init-js
// Settings Masonary
jQuery( document ).ready( function( $ ) {
    $( '.content' ).masonry(  );//targets the posts container
} );

// https://wpbeaches.com/create-a-masonry-layout-on-the-homeblog-page-in-wordpress
// https://gist.github.com/neilgee/d7870d1f59f63f4bacfb
// Loading via javascript
// You can also load via javascript only method which negates the need for jQuery

<?php
//Masonry load scripts
function wpb_masonry_scripts_styles_alt() {
	wp_enqueue_script ( 'masonry'); //jqueryless
}

add_action( 'wp_enqueue_scripts', 'wpb_masonry_scripts_styles_alt' ); 

//Masonry Style javascript
function wpb_js_masonry() { ?>

	<script>
		var container = document.querySelector('.home .content'); //set container
		var msnry;
		// initialize Masonry after all images have loaded
		imagesLoaded( container, function() {
		  msnry = new Masonry( container, {
		  	itemSelector: '.entry', //set target
		  });
		});</script>
<?php
}
add_action( 'wp_footer','wpb_js_masonry', 20);//add priority to push it below masonry script