如何使用分页自定义wp查询看起来像一个mansory网格？

Question

这是我使用分页进行简单wp查询的代码。但是我试图编辑代码以将自己组中的每个帖子分组，以便看起来像一个mansory网格。

这是我的代码：

        <?php
// set the "paged" parameter (use 'page' if the query is on a static front page)
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

// the query
$the_query = new WP_Query( 'cat=9&posts_per_page=9&paged=' . $paged ); 
?>

<?php if ( $the_query->have_posts() ) : ?>

<?php
// the loop
while ( $the_query->have_posts() ) : $the_query->the_post(); 
?>

<div class="proyectpost">
            //content here...

</div>


<?php endwhile; ?>

<div class="postsectionbottom">
<div class="paginationbar">
<?php
$big = 999999999; // need an unlikely integer

echo paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $the_query->max_num_pages,
    'show_all'           => True,
    'prev_next'          => False
) );
?>
</div>
<div class="backtotopbutton">
<a href="#" class="topbutton"></a>
</div>
</div>

<?php 
// clean up after the query and pagination
wp_reset_postdata(); 
?>

<?php else:  ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

这是我想要实现的目标的图片：

通常，我会在div中的每个div中进行几个wp查询，如下例所示：

<div class="projectospostssection">
<div class="postleftcolumn">
<div class="postleftwidth">
<?php $query = new WP_Query( 'cat=9&posts_per_page=1' ); ?>
    <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>              
            //content here...

</article><!-- #post-## -->  

            <?php endwhile; else : ?>
            <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
            <?php endif; ?>
</div>
</div>
<div class="postrightcolumn">
<div class="postrightwidth">
<div class="flexgrow">
<?php $query = new WP_Query( 'cat=9&posts_per_page=2&offset=1' ); ?>
    <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            //content here...
</article><!-- #post-## --> 

            <?php endwhile; else : ?>
            <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
            <?php endif; ?>
</div>
</div>
</div>
</div>

但问题是，我试图弄清楚如何将这些帖子分组到此页面查询中的div或查询中。这是我第一次在wp查询中执行wp_query ....任何建议都会有所帮助。

我希望将4行分为2组。在第一组内部，我将分组左栏中的前三张图片和右栏中的最后一张图片，依此类推...就像我在下一张图片中所示，红框作为外部div和霓虹绿盒作为内部div。