Columns depending on posts count

Question

What i would like to do;

if there is one post in custom post type, it should show up in one full column of bootstrap.

| post |

If there are two posts, they should show up in two half column (one-half).

| post | post |

If there are three posts, the should show up in three third columns (one-third).

|post|post|post|

And then it starts again from beginning.

|post|post|post|

| post |

I thought, i can use count_post function, but its not working as i expect.

For rows im using elements from this post:

Posts in Multiple Columns and Rows with one single loop

This post was not really helpfull: Set div columns in a loop by post count

Any ideas? Thanks.

Answer 1

This will need to be customized for your situation but it should be helpful.

      <?php
  // Start the loop.
  $i = 0; while ( $the_query->have_posts() ) : $the_query->the_post();
  if ( $i == 1 ) : ?>
    <div class="col-md-12">
  <?php elseif ( $i == 2 ) : ?>
    <div class="col-md-6">
  <?php elseif ( $i == 3 ) : ?>
    <div class="col-md-4">
  <?php endif; ?>

  <?php
  // Include the carousel template content.
  get_template_part( 'template-parts/content', get_post_format() ); ?>

  </div>

  <?php
  // End the loop.
  $i++; endwhile;