WordPress项目使用ACF repeater实现6图特定布局的更优方案

你现在拆分两个ACF repeater、手动给不同行图片写死宽度+z-index偏移的方案维护性差，响应式下很容易错位，换下面的实现方式更简洁稳定：

1. 简化ACF后台配置 #

• 删掉当前分两行设置的两个repeater字段，新建1个名为image_gallery的repeater字段，仅添加1个图片类型的子字段image即可。后台上传时按顺序传6张图，不需要手动分行，后续维护成本直接减半。

2. 精简PHP模板代码 #

去掉原来拆分两行输出的嵌套结构，直接循环输出6张图片到同一个网格容器里，代码如下：

<div class="container pt-5">
    <div class="row">
        <div class="col-6"><?php the_content(); ?></div>
        <div class="col-6">
            <div class="image-grid">
                <?php 
                if (have_rows('image_gallery')) : 
                    while (have_rows('image_gallery')) : the_row();
                        $image = get_sub_field('image');
                ?>
                    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                <?php 
                    endwhile;
                endif; 
                ?>
            </div>
        </div>
    </div>
</div>

如果你暂时不想调整已经建好的ACF字段，也可以保留原有两个repeater的输出逻辑，只需要删掉包裹两组图片的.image-grid__row-first、.image-grid__row-second两层div，让6张img标签直接作为.image-grid容器的子元素即可，后续CSS完全兼容。

3. 用CSS Grid实现布局 #

替换原有CSS，不需要手动计算宽度、写相对定位偏移、调整层级，直接通过网格定义位置，和参考布局效果完全一致：

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 240px);
}
.image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
    outline: 12px solid #ffffff;
}
/* 按图片上传顺序匹配网格位置，实现错落效果 */
.image-grid img:nth-child(1) {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}
.image-grid img:nth-child(2) {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    transform: translateY(20px);
}
.image-grid img:nth-child(3) {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
}
.image-grid img:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
    transform: translateY(-20px);
}
.image-grid img:nth-child(5) {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
}
.image-grid img:nth-child(6) {
    grid-column: 4 / span 1;
    grid-row: 2 / span 1;
    transform: translateY(-20px);
}

做移动端适配时，只需要在对应媒体查询里重写网格列数、图片高度和偏移值即可，调整成本远低于原有定位方案。

目标参考布局效果图

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