CODEWITHSUNDEEP
susysusy-sass
davidpauljunior
davidpauljunior

Reputation: 8338

How to set Susy gutter width to be more than 1 column

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) { ... }

Upvotes: 0

Views: 150

Answers (2)

davidpauljunior
davidpauljunior

Reputation: 8338

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

Upvotes: 1

Ronald Zwiers
Ronald Zwiers

Reputation: 840

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.

Upvotes: 0

Related Questions