如何用CSS实现每行图片数量递减的金字塔布局（ACF Gallery）

核心方案：分组+Flex布局 #

要实现每行元素数量递减的金字塔样式，最直接的方式是把每行的图片单独放在一个容器里，用Flexbox控制每行内的图片居中对齐，再通过调整行容器的左右边距实现缩进效果。结合ACF Gallery的话，只需要把返回的图片数组按预设的每行数量分组输出即可。

步骤1：ACF Gallery的分组输出（WordPress示例） #

假设你的ACF字段名为gallery_images，先定义每行的图片数量，然后循环分组输出：

<?php
$gallery = get_field('gallery_images');
// 定义每行的图片数量，按金字塔顺序
$row_counts = [5, 4, 3];
$current_img_index = 0;

echo '<div class="pyramid-container">';
foreach ($row_counts as $count) {
    echo '<div class="pyramid-row">';
    // 输出当前行的图片
    for ($i = 0; $i < $count; $i++) {
        if (isset($gallery[$current_img_index])) {
            $img = $gallery[$current_img_index];
            echo sprintf('<img src="%s" alt="%s" class="pyramid-img">', esc_url($img['url']), esc_attr($img['alt']));
            $current_img_index++;
        }
    }
    echo '</div>';
}
echo '</div>';
?>

步骤2：CSS样式实现金字塔效果 #

用Flexbox让每行内的图片居中，通过行容器的左右外边距控制缩进，形成金字塔：

.pyramid-container {
    max-width: 1200px;
    margin: 2rem auto;
}

.pyramid-row {
    display: flex;
    justify-content: center;
    gap: 2.5rem; /* 图片之间的间距 */
    margin-bottom: 2rem;
}

/* 第一行无缩进 */
.pyramid-row:nth-child(1) {
    margin-left: 0;
    margin-right: 0;
}

/* 第二行左右缩进，制造内移效果 */
.pyramid-row:nth-child(2) {
    margin-left: 4rem;
    margin-right: 4rem;
}

/* 第三行更大的缩进 */
.pyramid-row:nth-child(3) {
    margin-left: 8rem;
    margin-right: 8rem;
}

.pyramid-img {
    width: 110px;
    height: auto;
    object-fit: cover;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .pyramid-row {
        gap: 1rem;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    .pyramid-img {
        width: 80px;
    }
}

为什么Flexbox可行？ #

Flexbox的justify-content: center可以轻松让每行内的图片居中对齐，配合行容器的外边距缩进，完美实现金字塔的视觉效果。相比Grid，这种分组+Flex的方式逻辑更直观，容易调整每行的元素数量和缩进幅度。

其他可选思路 #

如果不想手动分组，也可以用CSS Grid结合grid-template-columns和column-gap，但需要计算每行的列数和偏移量，逻辑稍复杂，不如分组Flex的方式灵活。

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