html - 构建一个 3 列、2 行的 flex 网格布局，第一个元素跨越两行

Question

基本上我正在尝试编写代码:

我很确定它可以用 Flex 构建，但我似乎无法让它工作(并且无法响应)。相应地，在较小的屏幕尺寸下将右侧的 4 个 block 移动到主要的左侧大块下方会很好。

我在 WP 循环中构建它，但对它的那部分很满意，只是无法让实际的 HTML/CSS 结构工作。

这是我到目前为止尝试过的(失败了!):

HTML/循环

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