Search code examples
susy-compasssusy-sasssusysusy-next

Gutters in Susy remaining intact as spacing between elements. Bonus: wider doesn't work

There's an unwanted space between two blocks in susy. It seems to follow the size of the grid exactly, despite using the wide feature.

$susy: (
  columns: 9,
  gutters: 0.454,
  debug:(image: show,
  output : overlay,)
)
;
#grid{
    @include container(9);
    @include background-grid; 
    gutter-width: 0.454;
    }

#main_side_img{
  @include span(1.75 wide of 9);
}  

#main_heading_container{
  @include span(4 of 9);
  background-image: url(http://i.imgur.com/7Yxm5Sa.jpg);
  }

The code above, with #main_side_img set to 1.75 creates this: enter image description here

So I set the value of #main_side_img to 2 and much to my dismay the space between the two boxes remained constant, and the gutter simply moved over!

enter image description here

The gutter remains constant independent of the value I set for the span argument.

Bonus: isn't wider supposed to fill in the gutter on the left and on the right? It is filling in 2 gutter's-widths to the right.

Solution

  • Add the no-gutters keyword to your wide span. While wide tells it to add more space to the span width, it does not automatically remove the gutter output.

    @include span(1.75 wide of 9 no-gutters);