column-count - 为什么我的列数不能在 chrome 和 safari 中正常工作？

Question

我不明白为什么 chrome 显示 3 列而不是 4 列。我尝试将其更改为 5 或 6，但它仍然显示 3。Safari 根据我的代码正确调整。这是怎么回事？我需要设置宽度属性吗？

我还注意到，如果我将 .placesarticle 更改为 display: block，则显示 4 列，但缩略图和标题会分开。

HTML (& PHP)

<section class="placessection">

<?php
    $args = array(
            'post_type' => 'places',
            'post_status' => 'publish',
            'posts_per_page' => '100',
            'orderby' => 'title',
            'order' => 'ASC',
        );
    $arr_posts = new WP_Query( $args );
    
        if ( $arr_posts->have_posts() ) :
            while ( $arr_posts->have_posts() ) :
                $arr_posts->the_post();
?>

    <section class="placesarticle">
    <center>
        <div class="placescatthumbnail">
            <a href="<?php the_permalink();?>">
                <?php if (has_post_thumbnail()):?>
                    <img src="<?php the_post_thumbnail_url();?>" class="thumbnailinplaces">
                <?php endif;?>
            </a>
        </div>
    
        <div class="placescattitle">
            <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
        </div>
    </center>
    </section>

</section>

CSS

/* category: places */
.placesarticle {
    background-color: #fff;
    display: inline-block;
}

.thumbnailinplaces {
    width: 100px;
}

@media (min-width: 1000px) {
    .placessection {
        column-count: 4;
        column-gap: 1em;
    }
    
    .placesarticle {
        margin: 1em;
        width: 20vw;
    }
}

铬视图：

野生动物园视图：

标签： column-count