我如何使用奇点GS只有一个主网格

Question

我如何使用SGS没有每个嵌套的div产卵它自己的较小的网格?我知道它比这更强大，但在这种情况下，我特别想设置深埋段落

容器的宽度，以跨越原来的。main-wrapdiv容器的网格的5列。

例如，如果我对嵌套深度为4个容器的段落这样做，

p.mynested_para {
    @include grid-span(5, 1) /* i want this to refer to the .main container’s grid */

}

它出来很小!我一直在看文档，但还没有找到如何做到这一点。

Answer 1

您必须提供一个上下文:这个元素有多少列可用。

有两种方法:

1。在grid-span mixin

中

grid-span mixin最多接受四个参数:

1. 占用的列数。
2. 起始列的索引。
3. 上下文中的列数。
4. 上下文的Gutter ratio。

所以你需要做的是:

@include grid-span(5, 1, 8)

…其中8为当前上下文中可用的列数。

2。使用layout mixin

如果在一个上下文中有多个元素要跨，那么提及每个元素的上下文是很繁琐的。

所以不用这个:

.foo { @include grid-span(5, 1, 8); }
.bar { @include grid-span(1, 6, 8); }
.baz { @include grid-span(2, 7, 8); }

你可以这样做:

@include layout(8) {
  .foo { @include grid-span(5, 1); }
  .bar { @include grid-span(1, 6); }
  .baz { @include grid-span(2, 7); }
}

文档

在这里阅读更多关于这些特性的详细信息:

https://github.com/at-import/Singularity/wiki/Spanning-The-Grid环境影响