如何在Foundation 6的Block Grid Column中使用Grid？

Question

我希望有一个响应的项目​​列表，从服务器动态获取（因此项目数量未知）。 根据基金会6，块网格是要走的路。我已成功使用块网格来显示图像，但是当我尝试在块网格列中创建网格时，它看起来并不太好。

这是我的代码：

<div class="foods row small-up-1 medium-up-3 large-up-4">
    <div class="food column">
        <div class="row">
            <div class="small-6 medium-4 large-3 columns picture ar-wrapper ar-4-3">
                <div class="ar-container">
                </div>
            </div>
            <div class="small-6 medium-8 large-9 columns data">
                <div class="row">
                    <div class="small-12 columns title">
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns description">

                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns restaurant-name">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

没有其他类会干扰任何浮动设置的更改宽度。 结果如下：

左边的高大块是＆＃34;大3列＆＃34;元素和所选（blue-ish）元素是＆＃34;大9列＆＃34;大div（它是在大屏幕上制作的）。因此，从它的外观来看，块网格列有超过12个简单的网格列。

我感谢任何有关如何解决此问题的帮助或替代解决方案。