0

I'm using with-layout to temporarily set defaults for my page column structure. I need a 24 column grid to allow finer control, but need a gutter that's larger than 1 column. Is that possible?

@include with-layout(24) {
    .col-1 {
        @include span(17);
    }
    .col-2 {
        @include span(7);
    }
}

So something like @include with-layout(24 2col-gutter) { ... }

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54

2 Answers2

1

I realised that if you want the gutter to be a multiple of the column width (1 col, 2 col etc) then you can just use the pre and push options.

In my case I actually wanted the gutter to be twice the width of the column so this worked perfectly.

$susy: (
  columns: 24,
  gutters: 0
);

.col-1 {
  @include span(17);
}

.col-2 {
  @include span(5);
}

.col-1 + .col-2 {
  @include pre(2);
}

Demo

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
0

You could try:

$my-layout: (
  columns: 24,
  gutters: 2,
);

@include with-layout($my-layout) {
  .col-1 {
      @include span(17);
  }
 .col-2 {
     @include span(last 7);
 }
}

If you want more or less gutter-space change the number of gutters.

Ronald Zwiers
  • 780
  • 2
  • 10
  • 25
  • That doesn't seem to set the gutter to 2 columns. It's still a ratio of 1 column I think. Maybe 2/4 so half a column? – davidpauljunior Jul 08 '15 at 15:15
  • You can see it here [Sassmeister](http://sassmeister.com/gist/32f0b641baf69a2cb573) – Ronald Zwiers Jul 08 '15 at 15:32
  • I'm not really sure what that number is doing. 12 sets the margin to 4% but if you increased it to 200 then the margin is 4.32526%. That doesn't seem to correlate so I'm trying to work out what that number actually means. – davidpauljunior Jul 08 '15 at 19:44