Nesting grid but keep column widths and gutters consistent

Dan's Avatar


07 Oct, 2014 07:21 PM


I have a general 12 column grid. On the web page I have a left panel (3 columns) and a right panel (9 columns). Within the 9 column panel I want to nest boxes, each 3 columns wide. It works but the columns and gutters of the boxes aren't the same as those in the main page, presumably because they're set as percentages of the containing panel rather than the page as a whole.

I wondered how to prevent this, so that the grid of the nested items is the same as the grid of the main page? I've seen the article here but this seems to be set up differently to how I'm using (inheriting!) Gridset - the solution I'm working on uses SASS and span includes. So my code is more like this:

.left-panel {
    @include gs-span(d,1,3);
    @include gs-float(d,left);
.right-panel {
    @include gs-span(d,4,12);
    @include gs-float(d,right);
.box {
    @include gs-span(d,1,3,(4,12));
    @include gs-float(d,left);

Can anyone suggest how to get .box element to inherit the same width and gutter to the containing panels, to maintain the consistency of the grid on the page?

Many thanks.

  1. Support Staff 1 Posted by Gridset on 13 Oct, 2014 10:23 AM

    Gridset's Avatar

    Hello Dan.

    You were very close here. You are likely seeing this problem because d1 and d3 are outside of d4-d12. For .box, the gs-span just needs to be set to columns that are contained in d4-d12.

    For example, you gs-span could be:

    .box {
        @include gs-span(d, 4, 6, (4,12));
        @include gs-float(d, left, (4,12));

    Also: notice that I added the container parameter to the gs-float mixin. This will make sure the margins around the element are adjusted for the container as well.

    Please let me know if this helps. Thanks!

    — Nathan

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac