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
@include grid-span(4, 2);
@include grid-span(1, 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.