0

是否可以使用奇点嵌套网格？

这是我的设置：

$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';

我要问的当前上下文是 inside $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

  • 第 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 下面的最后 3 列 4
  • 分区 2：@include grid-span(1, 1);
4

1 回答 1

2

Of course you can! $grids only deals with your main grid context, but if you would like to change your grid context, you can either override your grid context through grid-span or you can do it through the layout mixin.

Also take a look at this related issue and answer.

于 2013-05-07T23:51:58.870 回答