砌体正确调用，但没有对齐网格

我正在尝试安装masony .js库到我的网站。但是无论我添加或删除什么，砌筑似乎都不会对齐网页上的任何内容。

这是我的代码:

<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>

任何帮助都将非常感激，我已经阅读了几篇关于使用Bootstrap安装砌体的文章，但无论我尝试什么，它仍然拒绝对齐https://i.stack.imgur.com/SDwPy.jpg