自定义大小的xy网格排水沟在基金会6

我正在使用基金会6与sass。我通过使用@include foundation-xy-grid-classes;包含了xy网格。到目前为止，一切都很好。自定义大小的xy网格排水沟在基金会6

但我需要一个边距较小的排水沟。我知道我可以覆盖$grid-margin-gutters，但这会改变我的水槽全球。

我只需要一些小格子，而不是所有的格子。我还希望所有的网格功能都保持不变，只需更小的排水沟。

我想是这样的：

<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)); 
    }

不过遗憾的是不包括的细胞（其宽）的权利的大小。

我可以在没有覆盖默认网格的情况下获得正常的网格吗？

来源

2017-10-19 Dafen

最简单的方法是定义一个全新的网格：

.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; 
    } 
}

此输出一个新的网格（块网格在我的情况），自定义排水沟。尝试玩值。希望这可以帮助

来源

2017-11-12 17:05:44 Marco

自定义大小的xy网格排水沟在基金会6

回答

相关问题