如何用Flex实现首项跨两行的响应式3列2行网格布局？

首先，你的核心需求是实现1个主元素跨两行，右侧4个元素分2行2列排列的布局，同时在小屏幕下自动堆叠成垂直顺序。之前的Flex写法因为依赖固定高度和column方向的wrap，很容易在不同屏幕尺寸下出问题，我们可以用两种更可靠的方式实现：

方案一：CSS Grid（推荐，更直观） #

Grid是专门为这种网格布局设计的，代码更简洁，不需要依赖固定高度，适配性更强。

步骤1：调整WP循环的HTML结构 #

你的循环逻辑没问题，只需要统一元素类名，让结构更清晰：

global $wp_query; 
$wp_query = new WP_Query( $args ); 
if ( have_posts() ) : 
    echo '<div class="featured-posts-grid">'; 
    while ( have_posts() ) : the_post(); ?>
        <div class="featured-post">
            <div class="featured-post-image">
                <?php the_post_thumbnail($wp_query->current_post === 0 ? "large" : "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-post-title">
                <a href="<?php the_permalink(); ?>">
                    <h3><?php echo mb_strimwidth(get_the_title(), 0, 40, '...'); ?></h3>
                </a>
            </div>
        </div>
    <?php endwhile; 
    echo '</div>'; 
    do_action( 'genesis_after_endwhile1' ); 
endif; 
wp_reset_query();

步骤2：Grid布局CSS实现 #

/* 基础网格框架 */
.featured-posts-grid {
    display: grid;
    grid-template-columns: 53% 23.5% 23.5%; /* 主列占53%，两个小列各占23.5%，总和100% */
    grid-template-rows: auto auto; /* 行高由内容自动撑开 */
    gap: 20px; /* 元素间的间距，可按需调整 */
    width: 100%;
    max-width: 1200px; /* 可选：限制最大宽度，避免大屏下内容过宽 */
    margin: 0 auto;
}

/* 第一个元素跨两行 */
.featured-post:first-child {
    grid-row: 1 / span 2; /* 从第1行开始，跨越2行 */
}

/* 响应式适配：小屏幕下切换为单列布局 */
@media (max-width: 768px) {
    .featured-posts-grid {
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }
    .featured-post:first-child {
        grid-row: auto; /* 取消跨行，回归正常顺序 */
    }
}

/* 可选：统一元素内部排版 */
.featured-post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #eee;
    padding: 10px;
}
.featured-post-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

方案二：Flex布局（如果你偏好Flex） #

Flex更适合一维布局，但通过嵌套容器也能实现需求，逻辑稍微复杂一点：

步骤1：调整WP循环的HTML结构 #

我们需要把右侧4个元素放到单独的容器里，方便控制两行两列的排列：

global $wp_query; 
$wp_query = new WP_Query( $args ); 
if ( have_posts() ) : 
    echo '<div class="featured-posts-container">'; 
    $post_count = 0;
    while ( have_posts() ) : the_post(); 
        $post_count++;
        if ($post_count === 1) {
            // 渲染主元素
            ?>
            <div class="featured-post-main">
                <div class="featured-post-image">
                    <?php the_post_thumbnail("large"); ?>
                </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-post-title">
                    <a href="<?php the_permalink(); ?>">
                        <h3><?php echo mb_strimwidth(get_the_title(), 0, 40, '...'); ?></h3>
                    </a>
                </div>
            </div>
            <?php
            // 开启右侧小元素容器
            echo '<div class="featured-posts-sidebar">';
        } else {
            // 渲染右侧小元素
            ?>
            <div class="featured-post-small">
                <div class="featured-post-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-post-title">
                    <a href="<?php the_permalink(); ?>">
                        <h3><?php echo mb_strimwidth(get_the_title(), 0, 40, '...'); ?></h3>
                    </a>
                </div>
            </div>
            <?php
        }
    endwhile; 
    echo '</div></div>'; // 闭合右侧容器和外层容器
    do_action( 'genesis_after_endwhile1' ); 
endif; 
wp_reset_query();

步骤2：Flex布局CSS实现 #

/* 外层容器：横向排列主元素和右侧容器 */
.featured-posts-container {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 主元素占53%宽度 */
.featured-post-main {
    flex: 0 0 53%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 右侧容器：换行实现两行两列 */
.featured-posts-sidebar {
    flex: 0 0 47%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* 右侧小元素各占一半宽度（减去间距） */
.featured-post-small {
    flex: 0 0 calc(50% - 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #eee;
    padding: 10px;
}

/* 响应式适配：小屏幕下切换为垂直堆叠 */
@media (max-width: 768px) {
    .featured-posts-container {
        flex-direction: column;
    }
    .featured-posts-sidebar {
        flex: 1;
    }
    .featured-post-small {
        flex: 0 0 100%; /* 小屏幕下右侧元素也单列 */
    }
}

/* 通用图片样式 */
.featured-post-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

为什么你的原代码不工作？ #

1. 固定高度依赖：flex-direction: column + flex-wrap: wrap的写法需要容器有固定高度，一旦内容高度超过设定值，布局就会混乱，而且不同屏幕尺寸下很难适配。
2. 宽度计算错误：width: 53% + width:20%*4的总和远超100%，加上默认的margin/padding，会导致元素溢出或换行异常。
3. 缺少间距控制：没有设置gap或margin，元素会挤在一起，排版混乱。

两种方案都能完美实现你的需求，其中Grid方案更简洁易维护，推荐优先使用。

内容的提问来源于stack exchange，提问作者user2115227