How to create nested grids with parent grid definition

Question

How can I create a nested grid, that will be aligned with its parent?

Let's say I have grid: 2 4 4 3

and I want each of its center columns to be subdivided by 2 columns, such that they will align with their parent containers.

Thanks.

To further explain my issue, considering the following code:

#content{
    at include grid-span(2,2);
    border-top: 1px solid red;
    article.article1{
        at include grid-span(1, 1, 4 4);
    }
    article.article2{
        at include grid-span(1, 2, 4 4);
    }
}
#sidebar{
    at include grid-span(1,4);
}

Is there a way to avoid repeated article rules in one rule that would serve for both?

Answer 1

You just need to include the context in the nested mixin. The context in this case is 4 4 so your mixin would be @include grid-span(1, 1, 4 4) to span the second column of the overall grid, or the first column of the nested grid.

Answer 2

I think you can do this with nesting @include layout($grid, $gutter)

Check here