Как использовать flex-wrap?

Question

У меня есть несколько коробок, которые я хочу выложить 3 x 3 вместо 5 x 5. Они отображаются с использованием flex-wrap, и мне было интересно, могу ли я использовать его как-то, чтобы изменить размер и макет, чтобы каждая коробка имеет одинаковый размер и пропорции, например, изображения одинакового размера и т. д. В моем header.php вставлено следующее, чтобы указать конкретную страницу и не влиять на другие элементы.

Css:

 <style>
    @media (min-width:768px) {
      .entry-content .event_listings {
        display: flex;
        flex-wrap: wrap;
      }
    }

    @media (min-width: 768px) {
      .entry-content .event_listings .event_listing {
        width: 20%;
        padding: 0 20px;
      }
    }

    @media (min-width: 768px) {
      .entry-content .event_listings .event_listing .box-layout {
        width: 100%;
        float: none;
        height: 100%;
      }
    }

    @media (min-width: 768px) {
      .entry-content .event_listings .event_listing .box-layout {
        display: flex;
        flex- direction: column;
      }
    }

    @media (min-width: 768px) {
      .entry. content .event_listings .event_listing .box-layout .event. title {
        flex-grow: 1;
      }
    }
</style>

Можно ли это настроить, чтобы достичь того, чего я хочу?

Html:

<div class="line-layout" style="display: none;">
    <li class="event_listing post-6985 type-event_listing status-expired 
    hentry" style="visibility: visible;" data-latitude="" data- longitude="">
        <div class="event-info-row-listing">
            <a href="https://adsler.co.uk/event/new-cross-and-deptford-free-film-festival/">
                <div class="row">
                    <div class="col-md-1">
                        <div class="organizer-logo">
                            <img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager. 
                    uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="event-title">
                            <h4>New Cross and Deptford Free Film
                                Festival</h4>
                            <div class="boxes-view-listing-registered- 
                        code">
                            </div>
                            <div class="event-organizer-name">
                                <normal>Deptford Film Festival
                                    <normal></normal>
                                </normal>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="date" <date>2019-05- 26</date>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="event-location">
                                <i class="glyphicon glyphicon-map-marker"></I>
                                London
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="event ticket">#free</div>
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                </div>
            </a>
        </div>
    </li>
    <!-- Box Layout -->
    <a class="event_listing post-6985 type-event_listing status-expired 
    hentry" href="https://adsler.co.uk/event/new-cross-and-deptford- 
    free-film-festival/">
        <div class="box-layout">
            <div class="event-img"><img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager. 
            uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
            </div>
            <div class="boxes-view-box-registered-code"></div>
            <div class="event-title">
                New Cross and Deptford Free Film Festival
            </div>
            <div class="event-start-date">2019- 05-26</div>
            <div class="event-location">
                <i class="glyphicon glyphicon-map-marker"></i> London
            </div>
            <div class="box-footer">
                <div class="event-ticket">#free</div>
            </div>
        </div>
    </a>
</div>

Страница: https://adsler.co.uk/find-an-event/