CODEWITHSUNDEEP
singularitygs
Luis Martins
Luis Martins

Reputation: 59

How to create nested grids with parent grid definition

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?

Upvotes: 1

Views: 271

Answers (2)

Bryan
Bryan

Reputation: 374

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

Check here

Upvotes: 0

scottkellum
scottkellum

Reputation: 590

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.

Upvotes: 1

Related Questions