首页 文章

基础：使用不同总列数嵌套网格

提问于
浏览 次
1

我正在使用一个基本的 12 col 网格，它可以很好地工作 . 这是我的 _settings.scss

$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
        small: 20px,
        medium: 30px,
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;

这是我的标记：

<div class="grid-container wrapper">
    <div class="grid-x grid-margin-x">
        <div class="cell medium-12"></div>
    </div>
</div>

现在如上所述，我对 12 cols 很满意，我希望保持这样 . 现在对于一个特定的元素，我需要使用一个嵌套的 24 col 网格，它最终会以smth结尾 . 像下面的标记：

<div class="grid-container wrapper">
    <div class="grid-x grid-margin-x">
        <div class="cell medium-12">
            <div class="grid-container wrapper">
                <div class="grid-x grid-margin-x">
                    <div class="cell medium-24"></div>
                </div>
            </div>
        </div>
    </div>
</div>

有没有办法实现这个目标？

sass grid zurb-foundation zurb-foundation-6

1 回答

  • 1

    它似乎不像简单地使用类名就可以解决 . 但您可以使用 xy-cell-size() 手动定义 col 宽度

    这是我更新的 scss ：

    .custom-medium-24 {
    width: xy-cell-size(24 of 24);

    @include breakpoint(small only) {
        width: 100%;
    }
}

.custom-medium-14 {
    width: xy-cell-size(14 of 24);

    @include breakpoint(small only) {
        width: 100%;
    }
}

    感谢评论中的提示！

    回复于

相关问题