Как отобразить элементы в сетке с @media?

Question

Вопрос не требует пояснений, но возможно ли отобразить отдельные объявления в сетке в режиме рабочего стола с помощью CSS @media? Все одинакового размера с пробелом между, скажем, 3х3 или 4х4. Страница: https://adsler.co.uk/find-an-event/. На данный момент все рекламные объявления разных размеров и разбросаны по странице в случайном порядке.

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/2
    456d41f16399aed538d25b1cd32ad1
    4.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>
      </a>
      </div>
  </li>
  </div>
  <!-- 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/2
    456d41f16399aed538d25b1cd32
    ad14.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>