我使用flexbox column wrap创建了一个简单的砖石布局，但是我注意到带有“film/tv”和“pop”的栏比其他栏要小得多。

如何强制每一列具有大致相同的宽度？

下面是我的CSS代码:

    & .masonry-layout {
        display: -webkit-box;
        display: flex;
        flex-flow: column wrap;
        width: 100%;
        height: 730px;


        & .item {
            background-repeat: no-repeat;
            background-size: cover;
            box-sizing: border-box;
            border-radius: var(--theme-border-radius);
            display: flex;
            flex-direction: column;
            padding: 10px;
            margin: 0 5px;
            margin-bottom: 10px;
            

            & .item__content {
                align-self: flex-end;                
                flex-direction: row;
                width: 100%;
                box-sizing: border-box;
                color: var(--theme-color-white);
                font-size: calc(var(--teft-typography-base) * 0.75);
                font-weight: bold;
                text-transform: uppercase;
            }

            & .svg {
                display: flex;
                flex-direction: row;
                flex-grow: 2;
                justify-content: center;
                width: 100%;
            }
        }
    }

以下是HTML:

<div class="masonry-layout">
    <div class="item" style="background-image:url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/browse-library/>
        <div class="svg">
            <?php if (!empty ( $item->svg ) ) { echo ( $item->svg ); } ?>
        </div>
        <div class="item__content">
            <span><?php echo esc_html( $item->text ); ?></span>
        </div>
    </div>
</div>