0

I have this susy settings:

$susy: (
  columns: 8,
  gutters: 1/4,  
  global-box-sizing: border-box,   
);

Sometimes I need different gutters instead 1/4.

See image for example:

enter image description here

And the code:

.wrap {  
  @include clearfix; 
  @include container (500px); 

  .box-1 {
    @include span(4 of 8);
  }
  .box-2 {
    @include span(4 of 8 last);
  }
  .box-3 {
    @include span(4 of 8 wide no-gutter);
  }
  .box-4 {
    @include span(4 of 8 last);
  }

  .box-5 {
    @include span(3.95 of 8 wide no-gutter);
  }

  .box-6 {
    @include span(4 of 8 last);
  }
}

I tried this without success:

@include span(4 of 8 wide (gutter-override: 2px));

I found a way to fix it but not if it is correct

@include span(3.95 of 8 wide no-gutter);

Thanks

kurtko
  • 1,978
  • 4
  • 30
  • 47
  • What output did you get from `@include span(4 of 5 wide (gutter-override: 2px));` and what were you expecting? – Miriam Suzanne Jun 04 '15 at 19:40
  • I get `width: 83.33333%; float: left; margin-right: 2px;` which seems like what I'd expect. – Miriam Suzanne Jun 04 '15 at 19:42
  • With `@include span(2 of 4 wide (gutter-override: 2px));` I get: `width: 52.63158%;float: left;margin-right: 2px;` then the block 6 moves down , I need `width: 51.31579%;float: left;` – kurtko Jun 05 '15 at 09:31

2 Answers2

1

You can change the layout like this

@include with-layout(12 1/8 fluid float after) {

  .box-5 {
    @include span(2 of 12);
  }

  .box-6 {
    @include span(10 of 12 last);
  }

}

Where the 1/8 is the gutter width.

Bazinga
  • 10,716
  • 6
  • 38
  • 63
  • You mean: `.box-5 {@include gutters(3em);@include span(2 of 4);}` ?? yes, the box-5 changes its gutter but box-6 moves down because does not change its width – kurtko Jun 05 '15 at 09:39
0

Another solution:

.box-5 {
   float:left;
   width: span(4 of 8 wide) - 1%;
}

.box-6 {
   float:right;
   width: span(4 of 8);
}
kurtko
  • 1,978
  • 4
  • 30
  • 47