2

I'm trying to override the gutter width in Susy 2 but can't get it to work as required. My standard set up for the site is as follows which is fine.

$susy: (
  columns: 12,
  gutters: .5,
  gutter-position: after,
);

I have an image gallery where I want the spacing between blocks to be much less. I can override the gutter width using (gutter-override: 0.1) however this doesn't effect the width of the blocks. The widths of the blocks are still as if the gutter is .5.

Is it possible to change the gutter for a certain block of content (my gallery) so that the gutter can be a lot smaller and the width of the blocks will reflect this?

Thanks for any guidance in advance.

eh21
  • 51
  • 10

1 Answers1

4

Yes - gutter-override exists specifically for the case where you don't want to change the grid math, only override the gutter output. But you can change the math any time you want by setting gutters or using the grid shorthand:

gallery(3 (gutters: 0.1))

or

gallery(3 of 12 0.1)

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Hi Miriam, thanks. I've added this is which has overwritten the gutter and changed the widths accordingly. How can I ensure that the margin-bottom i'm adding remains consistent with this overwrite? I was using margin-bottom: gutter(); which doesn't pull in the new gutter – eh21 Apr 04 '16 at 12:59
  • You can either add the same clarification to the `gutter` function (e.g. `gutter(3 of 12 0.1)`, or you can wrap the entire block of code in a mixin that changes your defaults: `@include with-layout(12 0.1) { /* both your gallery and gutter */ }`. Anything nested inside the `with-layout` mixin will use the grid settings you pass into it. Then you can remove them from the gallery and gutter calls. – Miriam Suzanne Apr 04 '16 at 23:56