使用flexbox获取单行中具有不同高度的项目的布局

Question

我一直在尝试使用flexbox将此逐行进行。但是，正如我一直在研究的那样，我想我无法使用flexbox获得它。我遇到了一些建议使用网格布局的答案。但是我不知道该怎么做。我可以共享我的代码：

        <ul class="card-grid no-gutters">
            @foreach($list as $key => $restaurant)
                @if($key < 2)
                    @include('web.page.restaurant.elements.item', ['item' => $restaurant])
                @endif
            @endforeach
            <div class="card-grid__map-container">
                Google Map
            </div>
            @foreach($list as $key => $restaurant)
                @if($key > 1)
                    @include('web.page.restaurant.elements.item', ['item' => $restaurant])
                @endif
            @endforeach
        </ul>


.card-grid {
    $card-mb: 30px;
    $gutter: 6px;
    $gutter-md: 10px;
    $gutter-xl: ($grid-gutter-width / 2);
    // The main container is a row with no-gutters setting
    // <ul class="card-grid row">
    margin-bottom: -$card-mb;
    display: flex;
    flex-wrap: wrap;

    @media (min-width: map-get($grid-breakpoints, 'sm')) and (max-width: map-get($grid-breakpoints, 'md') - 1) {
        margin-left: -$gutter;
        margin-right: -$gutter;
    }

    @media (min-width: map-get($grid-breakpoints, 'md')) and (max-width: map-get($grid-breakpoints, 'xl') - 1) {
        margin-left: -$gutter-md;
        margin-right: -$gutter-md;
    }

    @include media-breakpoint-up(xl) {
        margin-left: -$gutter-xl;
        margin-right: -$gutter-xl;
    }

    // This items is also a Bootstrap grid items
    // with the following breakpoint setting
    // <li class="card-grid__item col-12 col-sm-6 col-lg-4">
    &__item {
        margin-bottom: $card-mb;

        // The cards would be too narrow in md-lg sizes so we introduce smaller grid gutters in those sizes
        // We need important to overwrite the reset rule comming from .no-gutters class
        width: 33.3333333333%;
        max-height: 400px;
        padding: 0 $gutter-xl !important;

        @media only screen and (max-width: 992px) and (min-width: 576px) {
            width: 50%;
            padding: 0 $gutter-md !important;
        }

        @media only screen and (max-width: 576px) {
            width: 100%;
            padding: 0 !important;
        }
    }

    &__map-container {
        @extend .card-grid__item;
        height: 80vh !important;
    }
}

但是我的地图容器与其他盒子的大小相同。