Masonry in wordpress only showing one column - php

Question

So I know masonry in a single column has been covered a few times on stack but I'm not very familiar with jquery and I'm not sure of the adjustments I need to make. I'm also not extremely proficient in wordpress to know if I am making an obvious mistake here. I'm editing a theme and I'm trying to make the blog use a masonry layout. The theme calls the post loop from it's own php file so the blog is kind of broken up in to several php files. I hope I am including the right info.
The posts are showing up in blocks but it's just one column straight down. It seems the container is going all the way across the page on each post. I'm not sure if it's not stopping the loop or what I need to add so that each post spreads across the container width. Any help or tips on what I am doing wrong would be greatly appreciated. Thanks in advance.
I added this to my functions.
function wdv_enqueue_scripts() {
wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'wdv_enqueue_scripts' );
This to my footer.php
<script>
jQuery( document ).ready( function( $ ) {
$( '#container2' ).masonry( { columnWidth: 220 } );
} );
</script>
Here is my code for the loop.
<div id="container2">
<?php
global $ae_post_factory;
$ae_post = $ae_post_factory->get('post');
$post = $ae_post->current_post;
?>
<div class="brick">
<div class="brick_header">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" >
<h4 class="media-heading title-blog"><?php the_title(); ?></h4>
</a>
</div>
<div class="brick_featured_image">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail (); ?>
</a>
<?php endif; ?>
</div>
<?php the_excerpt(); ?>
Read More
</div>
</div><!-- container -->
And this is the CSS
* masonry brick layout */
#container2 {
width: 100%; /* width of the entire container for the wall */
margin-bottom: 10px;
}
.brick {
width: 30%; /* width of each brick less the padding inbetween */
padding: 0px 10px 15px 10px;
background-color: #fff;
margin-top: 5px;
}
.brick_header{
border-bottom: solid 1px #1d1d1d;
padding-bottom: 10px;
padding-top: 10px;
}
.brick_header a{
color: #ffff00;
}
.brick_header a:hover{
color: white;
}
.brick_featured_image{
width: 100%;
margin-top: 10px;
}
.brick_featured_image img{
width: 100%;
height: auto;
}

Answer 1

Here you're providing Column-Width in JS 220px.
And in CSS : 30%.
That might be creating problems.
Make sure your HTML Structure Looks like this.
<div id="container2">
<div class="brick">...</div>
<div class="brick">...</div>
<div class="brick">...</div>
</div>
And CSS :
.container2{
width:100%;
}
.brick{
width:25%;
/*
This should be respective of the columns you want
Like for 4 columns, 100%/4 = 25%
*/
}
And JS.
var $container2 = $('#container2');
$container.masonry({
itemSelector: '.brick'
});
For more detailed explaination : http://masonry.desandro.com/#getting-started
To know more details on the problem you're having, kindly provide the URL so I can have a look at it and can provide exact solution.

Answer 2

I personally use the "js-masonry" class mainly because if you are using a framework such as Bootstrap or Modest Grid, it will keep the gutter settings, etc.
Here is an example:
<div class="js-masonry">
<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="dt-6 tl-6 tp-6">
<article>
<h2>
<a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
<i class="fa <?php echo strtolower(str_replace(" ", "-", get_field('project_type'))); ?>"></i>
<?php the_title(); ?>
</a>
</h2>
<?php the_excerpt(); ?>
<div class="download">
<a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
View <?php the_title(); ?>
</a>
</div>
</article>
</div>
<?php endwhile; ?>
<?php else: ?>
<h2>No posts to display</h2>
<?php endif; ?>
Notice that the <div class="js-masonry"> is outside of the while.