How can I pull out a nested grid element by 1 column?

Question

Given the following HTML structure:

<div id="a">
  A
  <div id="b">
    B
  </div>
</div>

...and the following Singularity SCSS:

$grids: 6;
$gutters: .1;
$gutter-styles: 'split';

div#a {
  @include grid-span(5,2)
}

div#b {
  // @todo: position and width.
}

...I want to create a layout like this, where B is pulled left, out of its container A, by 1 column, and spans the 2 leftmost columns:

  -----------
  |  A      |
-----       |
| B |       |
-----       |
  |         |
  -----------

Of course I can do the math myself, but I feel like this should be possible using Singularity mixins and functions (after all, that's why I'm using a grid framework :-)) However, I can't get the dimensions and positioning of B correct.

Which Singularity mixins and/or functions do I use to set the width (column span) and position (negative margin-left) of div#b?

Answer 1

The answer highly depends on what flow you want inside the #A block.

Keeping the flow

The simpliest thing to do is to pull the #B block outside with a negative margin.

To do that, you should not use the grid-span() mixin. Instead, use the width and margin CSS properties. Values for those properties can be calculated with the column-span() and gutter-span() helper functions.

Those helper functions accept the $grid argument which stands for grid context. You should provide the grid context of the #A block, which is one column less than the main grid.

$grids: 6
$gutters: .1
$gutter-styles: 'split'

$a-columns-width: 5

#a
  +grid-span($a-columns-width,2)
  overflow: visible

#b
  width: column-span(2, 1, $grid: $a-columns-width)
  margin-left: - column-span(1, 1, $grid: $a-columns-width) - gutter-span($grid: $a-columns-width) 

Please have a look at the demo: http://sassbin.com/gist/6676220/

Removing #B out of the flow

But the #B block is not taken out of the flow. It still occupies the whole width of the #A block, so you can't put anything to the right of #B.

If you need to put some text and stuff to the right of #B, you should consider using another approach. Absolute positioning is what comes to my mind.

The solution will be more complicated. If you want me to come up with one, please explain your task in more detail. Provide a graphical template, maybe.

You will also have to use some trick to prevent #A's content from being covered by #B.

Flat HTML structure makes things simple

Also, why do you need the nested structure (#B inside #A) in the first place? If you make the structure flat, it becomes plain simple to position the blocks:

#a
  +grid-span(5,2)

#b
  +grid-span(2,1)
  margin-top: 4em

Demo: http://sassbin.com/gist/6676193/

#A's content appearing under #B is still an issue though.

PS If you're not satisfied with the answer, please explain the task in more detail and provide a graphical illustration of the desired page with all #A's contents.

Answer 2

Something like this seems like what you are looking for: http://sassmeister.com/gist/6663743