기초 : 전체 너비로 눈금의 열 조정

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 플렉스 그리드 내장되어 재단 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