Создайте 3-столбную 2-рядную гибкую сетку с первым элементом, охватывающим обе строки

Question

В основном я пытаюсь закодировать это:

Я почти уверен, что его можно создать с помощью Flex, но я просто не могукажется, что это работает (и быть отзывчивым).В связи с этим было бы неплохо переместить 4 блока справа под основным большим левым блоком на экранах меньшего размера.

Я строю это в цикле WP, но довольно удобно с этой частью,просто не могу заставить работать фактическую структуру HTML / CSS.

Вот что я попробовал до сих пор (и не смог!):

HTML / Loop

global $wp_query;
$wp_query = new WP_Query( $args );
if ( have_posts() ) : 
    echo '<div class="featured-posts-query">';
    while ( have_posts() ) : the_post(); ?>


            <div class="featured-posts">
                    <div class="featured-posts-image">
                        <?php the_post_thumbnail("thumbnail");?>
                    </div>
                    <div class="posts-category">
                    <?php $postType = get_post_type_object(get_post_type());
if ($postType) {
echo esc_html($postType->labels->singular_name);
} ?>
                    </div>

                    <div class="featured-posts-title">
                        <a href="<?php the_permalink(); ?>">
                            <h3> 
                                <?php echo mb_strimwidth(get_the_title(), 0, 40, '...'); ?>
                            </h3>
                        </a>
                    </div>
                </a>
            </div>


    <? endwhile; 
    echo '</div>';
    do_action( 'genesis_after_endwhile1' );
endif;
wp_reset_query();
}

CSS

.featured-posts-query {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 550px;
  width: 102%;
}

.featured-posts:nth-child(1) {
  flex: 0 0 100%;
  width: 53%;
}

.featured-posts:nth-child(n+2) {
  flex: 0 0 49%;
  width:20%;
}

Answer 1

Если вы можете использовать сетку, это довольно просто.

HTML:

<div class="grid">
  <div class="item item1"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS:

.item {
  width: 100%;
  min-height: 300px;
  background: #ddd;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.item1 {
  grid-row: span 2;
}

https://codepen.io/jonschmitz/full/LmaJmj