使用foreachloop打印图像网格

Question

我在前端视图中使用UIKIT css框架制作了以下图像网格。用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>