基础 6 中自定义大小的 xy 网格排水沟答案

【问题标题】：Custom sized xy-grid gutters in foundation 6基础 6 中自定义大小的 xy 网格排水沟
【发布时间】：2018-03-31 12:05:18
【问题描述】：

我正在使用 Foundation 6 和 sass。我使用@include foundation-xy-grid-classes; 包含了xy 网格。到目前为止一切都很好。

但我需要一个边距较小的网格。我知道我可以覆盖$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));
    }

但不幸的是，这不包括单元格的正确尺寸（它们太宽了）。

我能否在不覆盖默认网格的情况下获得正常的网格行为，但间距较小？

【问题讨论】：

标签： css sass grid zurb-foundation mixins

【解决方案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;
    }
}

这会输出一个带有自定义排水沟的新网格（在我的例子中是块网格）。尝试玩价值观。希望这会有所帮助

【讨论】：