Grid add blank spaces

I have a problem with my grid. I’m using Bootstrap and I don’t understand why my grid looks like this. It’s not making a correct grid. Has anyone faced the same problem ?
Thank you

Screenshot

    <?php


    get_header(); ?>
<section id ="page-title" class="col-md-12">
  <div class="container my-container">
    <div class="col-md-12">
      <?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'=>16, 'category_name'=>'test') );

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

      if( $counter == $grids ) :
        $counter = 0; ?>
        <div class="row">
        <?php else: ?>
          <div class="col-md-3">
          <?php endif; ?>

          <div class="col-md-6">
            <div class="the_post">
              <p class="p-meta"><?php the_post_thumbnail('actus'); ?>
                <p class="title"><?php the_title() ;?>
                  <?php the_time('m.d.y'); ?></p>
                </div>
              </div>
            </div>
            <?php
            $counter++;
          endwhile;
          //Pagination can go here if you want it.
        endif;
        wp_reset_postdata(); // Reset post_data after each loop
        ?>
      </div>
    </section>
    <?php get_footer(); ?>

Read more here: Grid add blank spaces

Leave a Reply

Your email address will not be published. Required fields are marked *