Getting info about selected posts using one WP_Query

Question

I'm currently working on displaying recent posts in 'masonry grid'. Because of multiple issues I came out with the idea of displaying pre-defined rows of that grid (due to designed layout).

First I did all that without dynamic content (posts). Then I tried to get WP_Query to work. But instead of displaying multiple posts in one row, I'm displaying one multiplied post per each row.

I already did "more posts" button - and it reveals content as described above too.

I suppose that prev_post() method may be wrong for that case, but I didn't found in Codex anything that might be better.

Below I attach part of code & screens to better show both problem and desired effect.

$wpb_all_query = new WP_Query([
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => '4',
]);

if ($wpb_all_query->have_posts()) {
    while ($wpb_all_query->have_posts()) {
        ob_start();
        ?>

        <div class="list_row three_col">
            <div class="column column_1_3">
                <?php
                $wpb_all_query->the_post();  //1 - the newest post 
                get_template_part('partials/list-single-post-masonry');
                ?>
            </div>
            <div class="column column_1_3">
                <?php
                $wpb_all_query->prev_post(); //2 - older older than 1
                get_template_part('partials/list-single-post-masonry');

                $wpb_all_query->prev_post(); //3 - older than 2
                get_template_part('partials/list-single-post-masonry');
                ?>
            </div>
            <div class="column column_1_3">
                <?php
                $wpb_all_query->prev_post(); //4 - older than 3
                get_template_part('partials/list-single-post-masonry');
                ?>
            </div>
        </div>

        <?php
        $generated_content = ob_get_contents();
        ob_end_clean();
        wp_reset_postdata();

    }
}

return $generated_content;

SCREEN no.1 - how it's looking now

SCREEN no.2 - how it should look like

Answer 1

Change $wpb_all_query->prev_post() to $wpb_all_query->the_post().

Class WP_Query does not have prev_post() method, it has the next_post() method, which takes the next post from the results (set up post member of WP_Query object), but it does not set the global variable. To reach for the data of the current post, you must use $wpb_all_query->post (eg. $wpb_all_query->post->post_name ) or use $wpb_all_query->setup_postdata() to set the global variable $post.

$wpb_all_query->the_post() is equivalent to:

$wpb_all_query->next_post();
$wpb_all_query->setup_postdata();