我正在使用 PHP8.1 和 Foundation 6.8.1。

这段代码是从数据库获取图片名称并以网格布局显示：每行四张图片，所需行数不限。我曾经全部用 PHP 来实现，能工作，但看起来丑陋，而且有点混乱。

我最近了解了 Foundation 的 Block Grid，看起来太简单了。但我就是弄不明白怎么让它工作。我用过 Foudation 的基础知识，但这个 Block Grid 对我来说是全新概念。

我的代码：

<div class="row large-up-4">
  <?php
  foreach($highest_badges as $badge){

    if( !empty($badge['image_name']) ){
      ?>
      <div class="column"><img src="../../images/badges/<?= $badge['image_name'] ?>" /></div>
      <?php
    } // end if

  } // end foreach
  ?>
</div>

图片已经显示出来，但都在同一排。请看附图。它们在页面右侧向右滚出屏幕。背景为黑色的那些已经超出页面（主内容区域）之外。

编辑补充：

Justinas的帖子让我意识到我应该说明：我展示的代码来自Foundation官方文档：Foundation 6 Block Grid

解决方案

所以，我在跟随的教程中使用的是 Foundation grid - float。与本问题无关的是，我尝试了另一种使用 grid-x 代码的方法，这让我想到把它也应用到我的问题上。Viola 它起作用了。

<div class="grid-x grid-padding-x small-up-2 medium-up-4 large-up-6">
  <?php
  foreach($highest_badges as $badge){
    if( !empty($badge['image_name']) ){
    ?>
      <div class="cell"><img src="../../images/badges/<?= $badge['image_name'] ?>" /></div>

    <?php
    } // end if !empty
  } // end foreach
  ?>
</div>

这让我困惑，因为站点的其余部分并没有在 divs、rows 和 columns 这些地方使用 grid-x 风格的编码。不过，这个留待明天再说。