我如何在只有 1 个主网格的情况下使用 Singularity GS？

Question

如何在没有每个嵌套 div 产生它自己的较小网格的情况下使用 SGS？我知道它比那个更强大，但对于这种情况，特别是我想将 deeply-buried paragraph

容器的宽度设置为跨越原始 .main-wrap div 容器网格的 5 列.

例如，如果我对嵌套 4 个容器深的段落执行此操作，

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

}

结果很小！我一直在查看文档，但还没有找到如何做到这一点。

Answer 1

您必须提供上下文：此元素有多少列可用。

有两种方法：

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

所以你需要做的是：

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

...其中 8 是当前上下文中可用的列数。

如果在一个上下文中有多个元素要跨越，那么为每个元素提及上下文是乏味的。

所以不是这个：

.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); }
}

在此处详细了解这些功能：

How can i use Singularity GS with only 1 master grid?