css - Foundation 6 中自定义大小的 xy 网格排水沟

Question

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

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

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

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

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

这会输出一个带有自定义间距的新网格(在我的例子中是 block 网格)。尝试玩弄值(value)观。希望这有帮助