Question

是否可以使用Singularity嵌套网格？

这是我的设置：

$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
div.1-d嵌套在div1中并跨越堆叠在1-c
div.2：@include grid-span(1, 1);

Answer 1

当然可以！ $grids仅处理您的主网格上下文，但如果您想更改网格上下文，则可以覆盖网格上下文through grid-span，也可以通过layout mixin执行此操作。< / p>

另请查看此related issue和answer。

如何在另一个网格中嵌入奇点网格

1 个答案: