Question

我正在使用基础6和sass。我使用@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;
    }
}

这会输出一个带有自定义装订线的新网格（在我的情况下为网格）。尝试玩值。希望这有帮助

基础6中定制尺寸的xy网格排水沟

1 个答案: