Loading Wordpress posts into multiple DIVs (Columns)

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">
            <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></a>
            <h3 class="journal_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></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">
            <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></a>
            <h3 class="journal_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></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">
            <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></a>
            <h3 class="journal_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        </article>
    <?php $count3++; } ?>
    <?php endforeach; ?>
    </div>
</div>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

Answer 1

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">
        <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></a>
        <h3 class="journal_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></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 2

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">
        <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></a>
        <h3 class="journal_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></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 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><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <?php the_excerpt(); // or the_content(); or any ?>
                </div>

            <?php } ?>
         <?php wp_reset_postdata(); ?>
        <?php endif; ?>
    </div>
</div>