WordPressの記事リストをギャラリーサイトのようにタイル状に隙間なくビッシリと表示させる方法

<?php wp_enqueue_script('jquery'); //jQueryを呼び出していない場合は呼び出す。既に呼び出している場合は不要。?>
<!-- Masonryライブラリの呼び出し -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/masonry.pkgd.min.js"></script>

<div id="list">
<!-- 記事一覧 -->
<?php 
if (have_posts()) : // WordPress ループ
  while (have_posts()) : the_post(); // 繰り返し処理開始
    get_template_part('entry-card');//投稿のブロック要素呼び出し
  endwhile; // 繰り返し処理終了 ?>
  <div class="clear"></div>
<?php else : // ここから記事が見つからなかった場合の処理  ?>
    <div class="post">
      <h2>記事はありません</h2>
      <p>お探しの記事は見つかりませんでした。</p>
    </div>
<?php
endif;
?>
</div><!-- /#list -->

<?php //投稿をのリスト表示のループ内で呼び出されるサムネイルカード ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('entry') ?>>
  <div class="entry-thumb">
    <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <a href="<?php the_permalink(); ?>" class="entry-image"><?php the_post_thumbnail( 'thumb320', array('style' => 'width:320px;height:180px;') ); ?></a>
    <?php else: // サムネイルを持っていないときの処理 ?>
      <a href="<?php the_permalink(); ?>" class="entry-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" title="NO IMAGE" style="width:320px;height:180px;" class="no-image list-no-image" /></a>
    <?php endif; ?>
  </div><!-- /.entry-thumb -->
  <div class="entry-content">
      
    <h2><a href="<?php the_permalink(); ?>" class="entry-title"><?php echo get_the_title(); ?></a></h2>
    <p class="post-meta">
      <span class="post-date"><i class="fa fa-clock-o fa-fw"></i><?php the_time('Y/n/j') ;?></span>
      
      <?php if (is_category_visible()): ?>
      <span class="category"><i class="fa fa-folder fa-fw"></i><?php the_category(', ') ?></span>
      <?php endif; ?>
    </p><!-- /.post-meta -->
    <p class="entry-snippet"><?php echo get_the_custom_excerpt( get_the_content(''), get_excerpt_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?></p>
<p class="entry-read"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
  </div><!-- /

add_image_size('thumb320',320,180,true);

.entry{
  width:214px;
  margin:10px 5px 0 5px;
  border:1px solid #ddd;
  border-radius:5px;
  float:left;
  clear:none;
}

#main .entry{
  width:214px;
  margin:10px 5px 0 5px;
  border:1px solid #ddd;
  border-radius:5px;
  float:left;
  clear:none;
}

.entry-thumb {
  margin-top:0;
  margin-right: 0;
  text-align:center;
}

.entry-thumb img{
  width:100% !important;
  height:auto !important;
  margin-bottom:0;
}

.entry-content {
  margin-left: 0;
}

.entry h2 a{
  margin-top:0;
  font-size:16px;
  line-height:110%;
}

.post-meta{
  margin:0;
  font-size:14px;
}

.post-meta .category{display:none;}

.entry-snippet{
  font-size:14px;
  padding:0 5px;
  word-wrap:break-word;
}

.entry-read a{font-size:12px;padding:0 5px;}

.entry .post-meta .category{
  font-size:14px;
}

.entry h2{
  padding:0 5px;
  word-wrap:break-word;
}

<?php if ( !is_singular() ): //投稿ページや固定ページ以外のとき?>
<script>
  jQuery(function(){
    jQuery('#list').masonry({ <!-- #listは記事一覧を囲んでる部分 -->
      itemSelector: '.entry', <!--.entryは各記事を囲んでる部分-->
      isAnimated: true <!--アニメーションON-->
    });
  });
</script>
<?php endif; ?>