如何让Foundation Block Grid实现多行显示？

针对你遇到的所有图片挤在同一行的问题，按以下步骤排查修复：

• 强制图片自适应容器宽度
  图片自身尺寸可能超出列的宽度，导致列被撑开无法换行。给图片添加样式限制宽度：

  <div class="column">
    <img src="../../images/badges/<?= $badge['image_name'] ?>" style="max-width: 100%; height: auto;" />
  </div>
  

  也可以把这个样式写入全局CSS，避免重复代码：

  .column img { max-width: 100%; height: auto; }
  

• 确认Foundation资源加载正确
  检查页面是否完整引入了Foundation 6.8.1的CSS和JS文件，Grid布局依赖的样式如果未加载，Block Grid的自动换行逻辑会失效。

• 替换为Flex Grid结构（Foundation 6推荐方案）
  如果你用的是Foundation 6默认启用的Flex Grid，可以改用grid-x和cell的标准结构，兼容性更好：

  <div class="grid-x grid-margin-x large-up-4">
    <?php foreach($highest_badges as $badge): ?>
      <?php if(!empty($badge['image_name'])): ?>
        <div class="cell">
          <img src="../../images/badges/<?= $badge['image_name'] ?>" style="max-width:100%;height:auto;" />
        </div>
      <?php endif; ?>
    <?php endforeach; ?>
  </div>
  

• 排查自定义CSS冲突
  检查项目中是否有自定义样式覆盖了Foundation的row或column类，比如设置了display: flex但未添加flex-wrap: wrap，或者给列设置了固定min-width导致无法收缩。

内容的提问来源于stack exchange，提问作者John Cowan