How to achieve a post grid with different sized divs

Hi there,

This is the current code I have for our post grid (blog overview page):

<?php
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
	$category_id = 2 ?>

<?php
$args = array('posts_per_page' => 8, 'paged' => $paged, 'cat'=>2 );
query_posts( $args);

// The Loop
if ( have_posts() ) : while (have_posts()) : the_post();
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'medium', true);
$thumb_url = $thumb_url_array[0];
$post_id = get_the_ID(); ?>

	<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 post_link_con">
    	<a href="<?php the_permalink(); ?>">
            <div>
            <div class="cat_post_thumb" style="background-image:url(<?php echo $thumb_url; ?>)">
				<div class="date_stamp">
                	 <div class="day_date">
						 <?php the_time('jS') ?>
                         <span class="upper"><?php the_time('M') ?></span>
                    </div>
                    <div class="year_date">
                    	<?php the_time('Y') ?>
                    </div>
                </div>
            </div>			 

            <div class="post_link">
                <h2 class="title font14 orange_txt"><?php the_title(); ?></h2>

                <?php the_excerpt(); ?>
            </div>

         </div>
      </a>
  </div>

<?php endwhile; ?>
<!-- pagination -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
	<div class="martop15">
	   <?php previous_posts_link( ' <div class="page_nav prev_nav">
            <div class="marbot10"><img src="/wp-content/themes/volo/images/left_arrow.png" alt="Volo Commerce - Multi Channel eCommerce Services" title="Previous Page Arrow" height="50"></div>
            Newer posts
        </div>' ); ?>
         <?php next_posts_link( ' <div class="page_nav next_nav">
            <div class="marbot10"><img src="/wp-content/themes/volo/images/right_arrow.png" alt="Volo Commerce - Multi Channel eCommerce Services" title="Next Page Arrow" height="50"></div> Older posts
        </div>' ); ?>
    </div>
</div>
<?php else : ?>
<p>No posts found</p>
<?php endif; ?>

Which works great – but I want to achieve something like this:
https://gyazo.com/d1f80ad6ee3a49c3f21ee65a4a846424

(Basically a grid layout, with different sized divs – only displaying 8 different sized containers/divs (posts) on each page)

Could anyone help me achieve this please?

Regards,

Dan