How can I nest a singularity grid inside another

Question

Is it possible to nest grids with Singularity?

Here is my setup:

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

The current context I'm asking about is inside $break3.

I would like to have the following grid structure.

I realise the below isn't right it is just there as a demonstration as to the grid structure I'd like to have. I have tried using functions to output the correct widths but have had no luck, but that is probably because I was doing it all wrong.

HTML structure:

<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 nested in div1 and span the first column of 4
• div.1-b nested in div1 and span the last 3 columns of 4
• div.1-c nested in div1 and span the last 3 columns of 4 stacked below 1-b
• div.1-d nested in div1 and span the last 3 columns of 4 stacked below 1-c
• div.2: @include grid-span(1, 1);

Answer 1

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.