基礎：將網格的列縮放爲全寬

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中內置網，使得它很容易創建的任何結構，基金會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