应用错误收集

我正在使用Foundation for Apps（非基金会网站），我遇到了一个问题，即我的div上有很多空格。

我正在使用他们的新网格系统，它使用flexbox。我以为'我正在使用他们的系统。

为了帮助理解我的所作所为，我在jsfiddle中提供了代码：https://jsbin.com/nekubu/edit?html,css,output

有人可以帮助指出为什么会有这些间距？我怀疑我是以错误的方式使用这个网格系统，但文档和示例并不足以获得与我相关的良好用例。

背景背景：

首先，我根据Bootstrap的想法为“行”添加了网格块，为“列”添加了网格内容，然后跟随他们在应用程序基础文档中完全说出来。但后来我意识到这看起来完全错了，因为每个div都可以滚动并串起来。

内容阻止 - Grid - Foundation for Apps Docs

“如果基本块是Foundation for Apps布局的行，那么内容块就是列。它们可以像普通块一样调整大小和重新排序，但它们的目的是存放实际内容，而不仅仅是更多内容块“。

所以现在我有了你在这个jsfiddle中看到的代码。但是，现在有这些间距。我已经在Firefox和Chrome中对此进行了测试，两者都有这个问题。