是否可以用奇点嵌套网格?
下面是我的设置:
$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来做到这一点。
也看看这个相关的问题和答案