Loading Wordpress posts into multiple DIVs (Columns) - php

Question

I'm trying to load all Wordpress posts into three different Divs as equal,
like this
<div class="row">
<div class="col-4">
POSTS HERE 1/3
</div>
<div class="col-4">
POSTS HERE 1/3
</div>
<div class="col-4">
POSTS HERE 1/3
</div>
</div>
I've already done something similar on other pages, but the difference is I'm only loading 6 posts there, so it's easier,
but now I wanna list all posts in the page into 3 columns,
this is the code I've used for 6 posts:
<?php
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6)); ?>
<?php if ( $wpb_all_query->have_posts() ) : ?>
<?php query_posts('showposts=2'); ?>
<div class="col-sm-4">
<div class="article_list">
<?php $posts = get_posts('numberposts=2&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "2") { break; } else { ?>
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
<?php $count1++; } ?>
<?php endforeach; ?>
</div>
</div>
<?php query_posts('showposts=2'); ?>
<div class="col-sm-4">
<div class="article_list">
<?php $posts = get_posts('numberposts=2&offset=2'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count2 = 0; if ($count2 == "2") { break; } else { ?>
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
<?php $count2++; } ?>
<?php endforeach; ?>
</div>
</div>
<?php query_posts('showposts=2'); ?>
<div class="col-sm-4">
<div class="article_list">
<?php $posts = get_posts('numberposts=2&offset=4'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count3 = 0; if ($count3 == "2") { break; } else { ?>
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
<?php $count3++; } ?>
<?php endforeach; ?>
</div>
</div>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

Answer 1

Try the below code. you will get post list in below format.
<?php
$loop_counter = $innerBreak = 1;
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6));
if($wpb_all_query->have_posts()):
while($wpb_all_query->have_posts()) :
$wpb_all_query->the_post();
if($innerBreak == 1){
?>
<!-- when complete listing of 3 post open the new div -->
<div class="col-sm-4">
<?php
}
?>
<div class="article_list">
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
</div>
<?php
//when complete listing of 3 post closed previously div.
if($loop_counter%3==0){ echo '</div>'; $innerBreak = 1;}else{$innerBreak = 0;}
$loop_counter++; endwhile;
else:
echo "<div>No Results Found</div>";
endif;
?>

Answer 2

Thanks to Shivendra Singh
after some small tweaks, here is the code to equally split all posts into three columns
<?php
$loop_counter = $innerBreak = 1;
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1));
if($wpb_all_query->have_posts()):
while($wpb_all_query->have_posts()) :
$wpb_all_query->the_post();
if($innerBreak == 1){
?>
<?php $posts_count = round((($wpb_all_query->post_count) / 3)+0.5); ?>
<!-- when complete listing of 3 post open the new div -->
<div class="col-sm-4">
<div class="article_list" data-parallax='{"y" : -150, "distance": 2000, "smoothness": 10}'>
<?php
}
?>
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
<?php
//when complete listing of 3 post closed previously div.
if($loop_counter%$posts_count==0){ echo '</div></div>'; $innerBreak = 1;}else{$innerBreak = 0;}
$loop_counter++; endwhile;
else:
echo "<div>No Results Found</div>";
endif;
?>

Answer 3

In line $wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6)); ?> you use 'posts_per_page'=>6.
Try to: 'posts_per_page'=>-1 it's load all posts.
Then try instead of your code:
<!-- If you use bootstrap -->
<div class="container">
<div class="row">
<?php
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6)); ?>
<?php if ( $wpb_all_query->have_posts() ) : ?>
<?php while( $wpb_all_query->have_posts() ){ $wpb_all_query->the_post(); ?>
<div class="col-md-4">
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); // or the_content(); or any ?>
</div>
<?php } ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
</div>