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

Question

How can i use SGS without every nested div spawning it’s own smaller grid? I get that it’s more powerful than that but for this case, specifically I’d like to set the width of deeply buried paragraph

container to span 5 columns of the original .main-wrap div container’s grid.

for example if i do this to my paragraph which is nested 4 containers deep,

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

}

it comes out tiny! i’ve been looking through documentation but haven’t found how to do this yet.

Answer 1

You have to provide a context: how many columns are available for this element.

There are two ways:

1. In the grid-span mixin

The grid-span mixin accepts up to four arguments:

1. Number of columns to occupy.
2. Index of the column to start with.
3. Number of columns in the context.
4. Gutter ratio of the context.

So what you need to do is:

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

...where 8 is the number of columns available in the current context.

2. Using the layout mixin

If you have multiple elements to span in one context, it is tedious to mention the context for every of them.

So instead of this:

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

You can do this:

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

Documentation

Read about these features in more detail here:

https://github.com/at-import/Singularity/wiki/Spanning-The-Grid#context-overrides