기초 6에있는 사용자 정의 크기의 xy- 격자 배수구

Question

나는 sass가있는 Foundation 6을 사용하고 있습니다. @include foundation-xy-grid-classes;을 사용하여 xy 표를 포함 시켰습니다. 지금까지 모든 것이 좋습니다.

하지만 마진이 작은 격자가 필요합니다. 내가 $grid-margin-gutters을 덮어 쓸 수 있다는 것을 이해하지만 그것은 내 도랑을 globaly로 바꿀 것입니다.

일부 그리드에만 작은 홈통이 필요하고 모든 그리드에는 작은 홈통이 필요합니다. 또한 모든 그리드 기능이 더 작은 홈통과 동일하게 유지되기를 바랍니다.

<div class="grid-container full"> 
    <div class="grid-x grid-margin-x-small grid-margin-y-small"> 
     <div class="small-6 medium-4 cell" v-for="(entry, index) in data" v-bind:class="{auto : index === (data.length-1)}"> 
       ...some content... 
      </div> 
     </div> 
    </div> 

말대꾸 : 세포 (그들은 넓은에 있습니다)에 적합한 크기를 포함하지 않는

.grid-margin-x-small { 
    @include xy-gutters($gutters: 0.2rem, $negative: true, $gutter-position: (left, right, top, bottom)); 

    >.cell { 
     @include xy-gutters($gutters: 0.2rem, $gutter-position: (left, right, top, bottom)); 
    } 

그러나 불행하게도

나는 이런 일을 상상한다.

기본 그리드를 덮어 쓰지 않고도 더 작은 거터를 사용하여 정상적인 그리드 behoivior를 얻을 수 있습니까?

Answer 1

가장 쉬운 방법은 완전히 새로운 그리드를 정의하는 것입니다 :

.gallery-grid { 
    @include xy-grid('horizontal'); 

    @include xy-grid-layout(3, '.gallery-item'); 
    @include breakpoint(medium) { 
     @include xy-grid-layout(5, '.gallery-item'); 
    } 
    @include breakpoint(large up) { 
     @include xy-grid-layout(7, '.gallery-item', true, 15, 'padding'); 
     @include xy-gutters(15, 'padding', $negative:true); 
    } 
    .gallery-item { 
     margin: 0; 
    } 
} 

이 사용자 정의 배수구에 (내 경우에는 블록 그리드) 새로운 그리드를 출력합니다. 값을 가지고 놀아보십시오. 희망이 도움이