Распечатать сетку изображений с foreachloop

Question

У меня есть следующая сетка изображений, созданная с использованием UIKIT css framework в моем интерфейсе.Каков наилучший из возможных способов печати приведенного ниже макета сетки изображения с циклом foreach.

На данный момент я использую переменную цикла, т.е. $loop->first, чтобы проверить номер итерации цикла.и отображать изображение из БД, и да, это ужасный метод для выполнения работы.

Я был бы очень признателен, если бы кто-нибудь мог подсказать мне удобство в использовании цикла foreach

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<section class="uk-section uk-section-xsmall uk-section-default ">
  <div class="uk-margin-medium-top uk-margin-medium-bottom ">
    <div class="uk-container">
      <h2 class=" uk-text-center home-heading-primary uk-text-center uk-margin-large-bottom"><span>Drinks</span></h2>
      <div class="uk-grid-collapse uk-child-width-1-2 uk-child-height-1-2 uk-grid" uk-grid="">
        <div class="uk-first-column">
          <div class="destination">
            <a href="#"><img src="https://source.unsplash.com/1200x500/?wine" alt="" class="uk-padding-xsmall dest-image"></a>
            <div class="dest-topic">
              <a href="#">
                <div class="dest-title">Wine</div>
              </a>
            </div>
          </div>
          <div class="uk-child-width-expand@s uk-text-center uk-grid uk-grid-collapse" uk-grid="">
            <div class="uk-first-column uk-panel uk-padding-xsmall destination">
              <a href="#"><img src="https://source.unsplash.com/1200x500/?scotch" alt="" class="dest-image"></a>
              <div class="dest-topic">
                <a href="#">
                  <div class="dest-title">Scotch</div>
                </a>
              </div>
            </div>
            <div class="uk-panel uk-padding-xsmall destination">
              <img src="https://source.unsplash.com/1200x500/?beer" alt="" class="dest-image">
              <div class="dest-topic">
                <a href="#">
                  <div class="dest-title">Beer</div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="uk-child-width-expand@s uk-text-center uk-grid uk-grid-collapse" uk-grid="">
            <div class="uk-first-column uk-panel uk-padding-xsmall destination">
              <a href="#"><img src="https://source.unsplash.com/1200x500/?whiskey" alt="" class="dest-image"></a>
              <div class="dest-topic">
                <a href="#">
                  <div class="dest-title">Whiskey</div>
                </a>
              </div>
            </div>
            <div class="uk-panel uk-padding-xsmall destination">
              <a href="#"><img src="https://source.unsplash.com/1200x500/?rum" alt="" class="dest-image"></a>
              <div class="dest-topic">
                <a href="#">
                  <div class="dest-title">Rum</div>
                </a>
              </div>
            </div>
          </div>
          <div class="destination">
            <a href="#"><img src="https://source.unsplash.com/1200x500/?tequila" alt="" class="uk-padding-xsmall" class="dest-image"></a>
            <div class="dest-topic">
              <a href="#">
                <div class="dest-title">Tequila</div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>