Custom Grid Template for WordPress Loop

Question

I have created a custom output for a WordPress post category. How can I loop this output through a custom format as shown in the diagram below? The squares in the diagram represents the thumbnail for the post, and it is not to scale- therefore there are 4 equal sizes squares and one larger in the middle.

I have no understanding when it comes to the CSS required to output in this format, so any help is appreciated.

    <?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 3 posts per page and eliminate all sticky posts) */
$query1 = new WP_Query( array('posts_per_page'=>3, 'category_name'=>'Bangkok') );

if( $query1->have_posts()) :  while( $query1->have_posts()) : $query1->the_post(); 

    if( $counter == $grids ) : 
        $counter = 0; // Reset counter ?>
        <div class="col-cat3-last">
    <?php else: ?>
        <div class="col-cat3">
    <?php endif; ?>

<div class="entry-featured"><?php echo get_the_post_thumbnail( $post_id, 'medium' ); ?></div>
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
        <div class="entry-featured"><?php the_field('description'); ?></div>
        <a href="<?php the_permalink(); ?>"><button>Link Text</button></a>
        </div>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
wp_reset_postdata(); // Reset post_data after each loop
?>

Answer 1

There are 4 items in your code (image, title, description, and button). Please explain the 5th block in your diagram?

<div class="col-cat3">
  <div class="entry-featured">
    <img src="post_thumbnail" alt="" />
  </div>
  <h3>
    <a href="permalink" title="title_attribute">the_title</a>
  </h3>
  <div class="entry-featured">
    description
  </div>
  <a href="permalink">
    <button>Link Text</button>
  </a>
</div>