Cacher is the code snippet organizer for pro developers

// Step 2 - Create a file named say, masonry-init.js in your child theme’s js directory (create, if not existing) having the following code:

jQuery(function($){

	var $container = $('.content');

	$container.imagesLoaded(function(){
		$container.masonry({
			itemSelector: '.entry',
			// gutter: 40
			gutter: '.gutter-width'
		});
	});

});

// Add new image size
add_image_size( 'masonry-thumb', 350, 0, true );

/**
 * Template Redirect
 * Use archive.php for Posts page.
 */
add_filter( 'template_include', 'custom_blog_template', 99 );
function custom_blog_template( $template ) {

	if ( is_home() ) {
		$new_template = locate_template( array( 'archive.php' ) );
		if ( '' != $new_template ) {
			return $new_template ;
		}
	}

	return $template;
}

// Regenerate thumbnails

Updated on October 15, 2015. PDF of the old version can be found here for reference.

    Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

In this tutorial we are going to apply Masonry for all archive pages and Posts page in Genesis. For the Posts page, make sure you are NOT using the Blog Template that comes with Genesis. See Bill Erickson’s article.

http://masonry.desandro.com/options.html#element-sizing

/* Masonry
--------------------------------------------- */

.gutter-width {
	width: 1.6666666667%; /* 20px */
}

.masonry-page .content {
	margin-bottom: 40px;
}

.masonry-page .content .entry {
	border-radius: 0;

	/* ((no. of columns) * x) + ((no. of columns - 1) * gutter width) = available width */
	width: 23.75%; /* 4 columns */

	overflow: hidden;
	margin-bottom: 1.6666666667%;
}

.masonry-page .entry-title {
	word-wrap: break-word;
}

.masonry-page article {
	box-shadow: 0 1px 3px rgba(34, 25, 25, 0.1);
	border-radius: 3px;
	padding: 15px;
}

.masonry-page article .entry-title {
	font-size: 25px;
}

.masonry-page .content .entry a {
	text-decoration: none;
}

@media only screen and (max-width: 1024px) {

	/* 3 columns */

	.gutter-width {
		width: 2.2222222222%; /* 20px */
	}

	.masonry-page .content .entry {
		width: 31.8518518519%;
		margin-bottom: 2.2222222222%;
	}

}

@media only screen and (max-width: 800px) {

	.masonry-page .archive-description,
	.masonry-page .site-inner {
		background: #f5f5f5;
	}

}

@media only screen and (max-width: 736px) {

	/* 2 columns */

	.gutter-width {
		width: 3.0211480363%; /* 20px */
	}

	.masonry-page .content .entry {
		width: 48.4894259819%;
		margin-bottom: 3.0211480363%;
	}

}

@media only screen and (max-width: 414px) {

	/* 1 column */

	.gutter-width {
		width: 0;
	}

	.masonry-page .content .entry {
		width: 100%;
		margin-bottom: 20px;
	}

}

<?php

/*
 * @author  Sridhar Katakam
 * @link    https://sridharkatakam.com/masonry-genesis/
 */

// Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Reposition breadcrumb
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_before_content', 'genesis_do_breadcrumbs' );


// Reposition headline and / or description

// For category / tag / taxonomy archive pages
remove_action( 'genesis_before_loop', 'genesis_do_taxonomy_title_description', 15 );
add_action( 'genesis_before_content', 'genesis_do_taxonomy_title_description' );

// For author archive pages
remove_action( 'genesis_before_loop', 'genesis_do_author_title_description', 15 );
add_action( 'genesis_before_content', 'genesis_do_author_title_description' );

// For relevant custom post type archive pages
remove_action( 'genesis_before_loop', 'genesis_do_cpt_archive_title_description' );
add_action( 'genesis_before_content', 'genesis_do_cpt_archive_title_description' );

// For date archive pages
remove_action( 'genesis_before_loop', 'genesis_do_date_archive_title' );
add_action( 'genesis_before_content', 'genesis_do_date_archive_title' );

// For Posts page
remove_action( 'genesis_before_loop', 'genesis_do_posts_page_heading' );
add_action( 'genesis_before_content', 'genesis_do_posts_page_heading' );


// Enqueue Masonry
wp_enqueue_script( 'masonry' );

// Initialize Masonry
wp_enqueue_script( 'masonry-init', get_stylesheet_directory_uri() . '/js/masonry-init.js', '', '', true );

// Add custom body class to the head
add_filter( 'body_class', 'sk_body_class' );
function sk_body_class( $classes ) {
	$classes[] = 'masonry-page';
	return $classes;
}

// Force Content Limit regardless of Content Archive theme settings
add_filter( 'genesis_pre_get_option_content_archive', 'sk_show_full_content' );
add_filter( 'genesis_pre_get_option_content_archive_limit', 'sk_content_limit' );

function sk_show_full_content() {
	return 'full';
}

function sk_content_limit() {
	return '100'; // Limit content to 100 characters
}

// Remove author and comment link in entry header's entry meta
add_filter( 'genesis_post_info', 'sp_post_info_filter' );
function sp_post_info_filter($post_info) {
	$post_info = '[post_date] [post_edit]';
	return $post_info;
}

// Remove the post image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

// Display Featured image linking to entry
add_action( 'genesis_entry_header', 'sk_image', 9 );
function sk_image() {
	$image_args = array(
		'size' => 'masonry-thumb'
	);

	// Get the featured image HTML
	$image = genesis_get_image( $image_args );
	echo '<a rel="bookmark" href="'. get_permalink() .'">'. $image .'</a>';
}

// Add a div whose width (set in CSS) can be used as horizontal gap between the Posts
add_action( 'loop_start', 'sk_gutter_div' );
function sk_gutter_div() {
	echo '<div class="gutter-width"></div>';
}

// Reposition Archive Pagination
// Moves .archive-pagination from under main.content to adjacent to it.
remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
add_action( 'genesis_after_content', 'genesis_posts_nav' );

genesis();