如何使用@media在网格中显示元素？

Question

问题是不言自明的，但是可以使用CSS @media在桌面视图中的网格中显示单个广告吗？尺寸都相同，中间有3x3或4x4。该页面为：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>