Nested grid with pixel measures

Question

I'm beggining with singularitygs (and grids systems), and of course I run into problems. Here it is.

I have this HTML markup:

<div id="wrapper">
  <div id="main">
    <div id="first-column">content</div>
    <div id="second-column">content2</div>
  </div>
</div>

I have setup this assymetric grid:

$grids      : 97px 263px 263px 97px;
$gutters    : 70px;

And this scss:

#wrapper {
  @include background-grid;
  width: 930px;
  margin: 0 auto;
}
#main {
  //@include background-grid;
  @include grid-span(2, 2); //this element is spanned acros two columns in the middle
}
#first-column {
  @include grid-span(1, 1); //should be spanned acros first column in #main
}
#second-column {
  @include grid-span(1, 2); //this element should be spanned acros second column in #main
}

The question is how can I makes the inner divs be aware of the fact that #main should have only two columns (and one gutter). Instead it looks like that the #main inherit the default grid setup.

I've tryed lots of options like changing #main grid via @include layout. Or tell the columns to adapt to the correct context by adding @include grid-span(1, 1, 2); (the third number should tell the div that it's in the default grids context. But with no avail. I suspect that the problem is in my px definition of the default grid. Because the inner divs gets lots of time only 1.356% wide, and this look kind of suscpicious to me. Am I right? What can I do?

Thanks for any suggestion.

EDIT: I try add the exact px dimension and in combination with adding the nested context its looks like its supossed, but I think thats its not how it should work??

#block-formblock-contact-form {
  @include  grid-span(1, 2, 2);
  width: 263px;
}

#block-system-main {
  @include  grid-span(1, 1, 2);
  width: 263px;
}

Answer 1

The issue that you're running in to is that, while you've changed your grid to a two column symmetric grid, you haven't changed your gutters in proportion. What Singularity is seeing with how you've currently set it up is that you've got a 2 column grid, each column is width 1, and a gutter of width 70. Now, there are two ways you can solve this. The first is to explicitly state what your sub grid is in relation to the main grid. That would look like the following:

#first-column {
  @include grid-span(1, 1, 263px 263px);
}
#second-column {
  @include grid-span(1, 2, 263px 263px);
}

or, with @include layout

@include layout(263px 263px) {
  #first-column {
    @include grid-span(1, 1);
  }
  #second-column {
    @include grid-span(1, 2);
  }
}

The second option is to set up the correct ratio for columns to gutters when using sub grids. Singularity works best when it's dealing with small ratios instead of large "absolute" values.

@include layout(2, (70px / 263px)) {
  #first-column {
    @include grid-span(1, 1);
  }
  #second-column {
    @include grid-span(1, 2);
  }
}

Hope this helps!