Place custom grid inside of div with susy

Question

Suppose I have a grid with a container div, like such:

<div class="a">
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
</div>

and the following sass:

@import "susy";

$susy: (
    columns: 12,
    gutters: 1/4,
);

.a{
    background-color: blue;
    height: span(12);
    @include span(6);
}

Is it possible to then make the inside of a be its own 2x2 grid? I'd like to place a1, a2, a3, and a4 in each of the corners of a something like the following:

.a1, .a2, .a3, .a4{
    height: span(1);
}
.a1, .a3{
    @include span(1);
}
.a2, .a4{
    @include span(last 1);
}
.a1{
    background-color: green;
}
.a2{
    background-color: orange;
}
.a3{
    background-color: red;
}
.a4{
    background-color: pink;
}

Where I'd expect the top left corner to have a1, and go clock-wise through a2, a3, and a4.

Answer 1

Yes, a is currently spanning 6 columns on your main grid, so the simplest might be to make all your a1-a4 elements span 3 of 6:

.a1, .a2, .a3, .a4 {
    @include span(3 of 6);
}
.a2, .a4{
    @include last;
}

But you can also declare any arbitrary context you want:

.a1, .a2, .a3, .a4 {
    @include span(1 of 2);
}
.a2, .a4{
    @include last;
}

That's not guaranteed to line up with your global grid, but I don't know if you even want that. You can also look at the with-layout wrapper, if you want a new default grid for a larger block of code.