Основание: масштабирование столбцов сетки до полной ширины

Question

У меня есть строка, где мне не нужны 12 столбцов сетки фундамента. Можно ли масштабировать эти столбцы до полной ширины с разницей между столбцами, вычисленными динамически (не с классом small/medium/large-offset) с помощью основания, чтобы соответствовать размеру экрана?

Это мое кодирование, где столбцы непосредственно рядом друг с другом:

<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

Foundation 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