1

Im stumped as to how to pull a div back in the amount of a gutter. I have 12 columns with two divs. I have a Left div and a right div. The bottom portion of the screenshot is what I would like to achieve, however, I am not sure if my solution is correct and feasible to do.

Currently I have the div sitting at the 4 pos which produces the top portion of the image. I have the red arrow indicating where I would like the div to sit. Below that is the desired affect for reference.

.right {
    @include span(9 at 4 of 12);
}

enter image description here

the output of the sass produces this: 

.right {
    width: 74.57627%;
    float: right;
}

I can knockout the float and give it a negative margin-left to line it up but is there another function that i can use and does this mess with the susy???

Many thanks!!

lnickel
  • 331
  • 1
  • 6
  • 17

1 Answers1

0

This is a good case for using the spread option in Susy. Spread allows you to say how much a span should overflow adjacent gutters. The default is narrow, which doesn't overflow any gutters. In this case you want wide, to overflow a single gutter. (There is also wider if you need to overflow gutters on both sides)

.right {
    @include span(9 wide at 4 of 12);
}

(you can actually add that keyword anywhere in the list of arguments - I just like how this reads)

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Thank you very much for your response!! I actually just added a different gird to the overall container and zero-ed out the gutters. $map: layout(auto 12 0 inside fluid isolate); Not sure if that was correct but it seemed to work. Obviously your answer is the correct way :D and I have a lot more playing to do to understand Susy. – lnickel Jan 13 '16 at 18:52
  • Which approach is "right" completely depends on what you want. If you want gutters, but sometimes want to overflow into them, my approach would be better. If you really don't need gutters, your approach is much cleaner! Enjoy! – Miriam Suzanne Jan 13 '16 at 18:53