Масонство называется правильно, но не выравнивает сетку

Я пытаюсь установить библиотеку masonry.js на свой веб-сайт.
Но независимо от того, что я добавляю / удаляю, Masonry просто ничего не выравнивает на веб-странице.

Это мой код:

<script>
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
</script>

И мой HTML / PHP

<div class="container">
<div class="grid">
<div id="row" >
<?php foreach ($pages as $page): ?>
<div class="col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="grid-item"><a href="<?php echo BASE_URL; ?>/page.php?page=<?php echo $page['slug']; ?>"><img alt="Article Image" class="img-responsive" src="<?php echo BASE_URL;?><?php echo $page['image']; ?>"></div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>

Буду признателен за любую помощь, я прочитал несколько статей об установке Masonry с Bootstrap, но, что бы я ни делал, он все равно отказывается выравнивать
http://imgur.com/C0nyUYq