我如何将一个奇点网格嵌套在另一个奇点网格内



是否可以用奇点嵌套网格?

下面是我的设置:

$break: 500px;
$break1: 700px;
$break2: 900px;
$break3: 1200px;
$grids: 3;
$grids: add-grid(6 at $break);
$grids: add-grid(12 at $break1);
$grids: add-grid(2 8 2 at $break2);
$grids: add-grid(3 6 1 1 1 at $break3);
$gutters: 1/3;
$gutters: add-gutter(.25 at 900px);
$output: 'isolation';

我正在询问的当前上下文在$break3中。

我想有以下网格结构。

我意识到下面是不正确的,它只是作为一个示范,我想要的网格结构。我尝试过使用函数来输出正确的宽度,但没有运气,但这可能是因为我做错了。

HTML结构:

<div class="container">
    <div class="1">
        <div class="1-a"></div>
        <div class="1-b"></div>
        <div class="1-c"></div>
        <div class="1-d"></div>
    </div>
    <div class="2"></div>
</div>

SCSS

  • div。1: @include grid-span(4, 2);
  • div。1-a嵌套在div1中,并跨越4的第一列
  • div。1-b嵌套在div1中,并跨越4
  • 的最后3列
  • div。1-c嵌套在div1中,并跨越1-b下面堆叠的4的最后3列
  • div。1-d嵌套在div1中,并跨越1-c下面堆叠的4的最后3列
  • div。2: @include grid-span(1, 1);

当然可以!$grids只处理你的主要网格上下文,但是如果你想改变你的网格上下文,你可以通过grid-span覆盖你的网格上下文,或者你可以通过布局mixin来做到这一点。

也看看这个相关的问题和答案

相关内容

  • 没有找到相关文章

最新更新