Html 在Zurb基金会6中均匀地分布细胞

我正在构建一个应用程序布局，其中我希望在多个列上均匀地布局一些列出超链接的卡片。因此，屏幕空间将以最佳方式使用

我使用ZURB基金会6，并基于Zurb基金会6：下面的一段HTML：

测试
标题1






标题2









标题3








标题4




标题5






标题6








标题7















标题8











标题9

您可以看看这个代码笔：

（在更大的屏幕上看起来更好）

为实现这一目标：

@font-face{font-family:'Calluna'；
src:url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff格式（'woff'）；
}
身体{
背景：url（//subtlepatterns.com/patterns/scribble_light.png）；
字体系列：Calluna，Arial，无衬线；
最小高度：1000px；
}
#纵队{
列宽：320px；
柱间距：15px；
宽度：90%；
最大宽度：1100px；
保证金：50px自动；
}
div#列图{
背景：#fefefe；
边框：2个实心#fcfc；
盒影：0 1px2pRGBA（34,25,25,0.4）；
利润率：0.2px15px；
填充：15px；
垫底：10px；
过渡：不透明度。4s缓进缓出；
显示：内联块；
内柱断裂：避免；
}
div#列图img{
宽度：100%；高度：自动；
边框底部：1px实心#ccc；
垫底：15px；
边缘底部：5px；
}
div#列图figcaption{
字体大小：.9rem；
颜色：#444；
线高：1.5；
}
div#列小{
字号：1rem；
浮动：对；
文本转换：大写；
颜色：#aaa；
} 
div#列小a{
颜色：#666；
文字装饰：无；
过渡色：4s色；
}
div#列：悬停图形：非（：悬停）{
不透明度：0.4；
}
@媒体屏幕和（最大宽度：250px）{
#列{列间距：0px；}
#列图{宽度：100%；}
}

穿着18世纪60年代中期欧洲时装的灰姑娘
长发公主，穿着1820年代的服装
Belle，基于1770年的法国宫廷时尚
木兰，取材于明朝时期
睡美人，基于1485年的欧洲时尚
波卡洪塔斯以17世纪的波瓦坦服装为基础
《白雪公主》，基于16世纪的德国时尚
艾瑞尔穿着一件1890年代的晚礼服
蒂安娜穿着20世纪20年代风格的长袍
艺术与复制；

这看起来与我想要实现的完全一样，但为此我需要理解：）我知道我应该尝试使用列宽强制dis