0

I'm using the Susy 2 Gallery feature and would like to know how to influence the width of the vertical and horizontal gutters between each image in the gallery.

At the moment, there is not enough width between the images.

cassiomolin
  • 124,154
  • 35
  • 280
  • 359
user1493194
  • 313
  • 1
  • 3
  • 7

2 Answers2

0

The horizontal gutters are controlled with the gutters setting in the $susy map. They are set as a fraction of the column width. See the docs. Vertical gutters are handled by you, manually. Add vertical margins as you like. If you want them to match the horizontal gutters, you can use the Susy gutter() function (e.g. margin-bottom: gutter();).

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • I can see how margin-bottom: gutter(); works but if I add margin-left|right: gutter(...), the generated CSS is struck out by the Gallery generated styles. Maybe I'm missing something really obvious but I cannot seem to control the vertical space in between Gallery items. – user1493194 Nov 06 '15 at 22:51
  • If `margin-bottom: gutter();` works, I don't understand your problem. Please show a demo on codepen or sassmeister. – Miriam Suzanne Nov 07 '15 at 02:28
0

you can do something like:

@include gallery(2 of 12 split);
margin-bottom: gutter(); // the same as gutter(12)

splitting the gutters between images and giving the bottom gutter the width of two split gutters.

Jon
  • 143
  • 12