Масонство в WordPress показывает только один столбец

Так что я знаю, что кладка в одном столбце была покрыта несколько раз в стеке, но я не очень знаком с jquery и не уверен в корректировках, которые мне нужно внести. Я также не очень хорошо разбираюсь в WordPress, чтобы знать, делаю ли я здесь очевидную ошибку. Я редактирую тему и пытаюсь заставить блог использовать макет кладки. Тема вызывает цикл записи из своего собственного php-файла, поэтому блог разбивается на несколько php-файлов. Я надеюсь, что я включаю правильную информацию.

Сообщения отображаются в виде блоков, но это только один столбец прямо вниз. Кажется, контейнер проходит весь путь через страницу в каждом сообщении. Я не уверен, что это не останавливает цикл или что мне нужно добавить, чтобы каждое сообщение распространялось по ширине контейнера. Любая помощь или советы о том, что я делаю неправильно, будет принята с благодарностью. Заранее спасибо.

Я добавил это к своим функциям.

function wdv_enqueue_scripts() {
wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'wdv_enqueue_scripts' );

Это к моему footer.php

<script>
jQuery( document ).ready( function( $ ) {
$( '#container2' ).masonry( { columnWidth: 220 } );
} );
</script>

Вот мой код для цикла.

<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(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="read_more_link">Read More</a>
</div>
</div><!-- container -->

И это 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;
}