Вывод новостей через masonary

Я настроил masonry на главной странице, все отлично, у меня такой код:

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<?php
	global $post;
	$args = array( 'posts_per_page' => 1);
	$myposts = get_posts( $args );
	foreach( $myposts as $post ){
		setup_postdata($post);
		?>
		<div class="item"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail() ?></a></div>
		<?php 
	}
	wp_reset_postdata();
	?>

<?php wp_reset_postdata() ?>
</div>

Отображается на главной странице все нормально.

Захотел я добавить под каждой картинкой заголовок и цитату к статье, прописал следующий код:

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<?php
	global $post;
	$args = array( 'posts_per_page' => 3);
	$myposts = get_posts( $args );
	foreach( $myposts as $post ){
		setup_postdata($post);
		?>
		<article id="post-<?php the_ID(); ?>">
		<header>
		<div class="item"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail() ?></a></div>
		<div><?php the_title(); ?></div>
		</header>
		<content>
		<?php echo accesspresslite_excerpt( the_excerpt() , 400 ) ?>
		</content>
		<?php 
	}
	wp_reset_postdata();
	?>
</article>
<?php wp_reset_postdata() ?>
</div>

и теперь картинки отображаются некорректно, очень маленькие.
Картинки сжались, а заголовки и цитаты разбросаны по всей странице.
Я даже не знаю, что можно сделать, в идеале хотелось бы что-то такое как в http://demo.lp-tricks.com/recent-posts/responsive-grid-dark/
Спасибо большое!