我使用的是Foundation for Apps（而不是Sites for Foundation），但是我的div上有很多空格。
我正在使用他们的新网格系统，该系统使用flexbox。
我“认为”我正确使用了他们的系统。
为了帮助理解我的工作，我在jsfiddle中提供了代码：https://jsbin.com/nekubu/edit?html,css,output
有人可以帮忙指出为什么有这么多间距吗？
我怀疑我以错误的方式使用了此网格系统，但是文档和示例不够广泛，无法获得与我的相关的好用例。
背景内容：
首先，我按照Bootstrap的想法为“行”添加了网格块，为“列”添加了网格内容，然后按照它们在Foundation for Apps文档中准确地说明。但是后来我意识到，这似乎完全错了，因为每个div都是可滚动的并且聚集在一起。
内容块-Grid - Foundation for Apps Docs
“如果基本块是Foundation for Apps布局的行，那么内容块就是列。可以像常规块一样调整大小和重新排序它们，但它们旨在容纳实际内容，而不仅仅是更多块。”
所以现在有了您在此jsfiddle中看到的代码。但是，现在有所有这些间隔。我已经在Firefox和Chrome中对此进行了测试，并且都存在此问题。
代码：https://jsbin.com/nekubu/edit?html,css,output
预览：https://jsbin.com/nekubu
最佳答案
您的代码的主要问题是，在具有main-page类的div元素内，有4个元素，每个元素都有一个调整大小的类，它们希望填满整个网格。
在父元素容器内，您可以拥有总计为12的元素，并分配4 * 12（4个子div元素，每个元素分别具有small-offset-1和small-11）。同样，您分配给父容器的vertical类也使元素垂直拉伸，这就是为什么看到所有间距的原因。
我已将您的示例修改为此链接，只是为您提供了另一种方法：
https://jsbin.com/falojitalu/edit?html,css,output