基础:将网格的比例列到全宽度

Question

我有一排，我不需要基础网格的12列。是否可以按基础通过动态计算的列之间的边距将这些列扩展到全宽度，从而将其缩放到基础上，以便适合屏幕尺寸？

这是我的编码，其中列直接彼此相邻：

<div class="row">
<div class="large-2 medium-2 small-2 left white centered" >
      //Content
 </div>
 <div class="large-1 medium-1 small-1 left white centered" >
      //Content
 </div>
 <div class="large-2 medium-2 small-2 left white centered" >
      //content
 </div>
 <div class="large-1 medium-1 small-1 left white centered" >
      <//content
 </div>
 <div class="large-1 medium-1 small-1 left white centered" >
      //content
 </div>
 <div class="large-1 medium-1 small-1 left white centered" >
      //content
 </div>

Answer 1

基础6内置了flex网格，使创建任何结构变得非常容易，对于Foundation 5，您可以添加CSS以实现它。

<div class="flex-row">
    <div class="columns">
        //Content
    </div>
    <div class="columns">
        //Content
    </div>
    <div class="columns">
        //content
    </div>
    <div class="columns">
        //content
    </div>
    <div class="columns">
        //content
    </div>
    <div class="columns">
        //content
    </div>
</div>

CSS

.flex-row{
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.flex-row .columns{
   -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    min-width: 0;
}

参见示例http://codepen.io/shoaibik/pen/dxwylo