image grid margins

[Sciss]

in _sass/grid.scss I can see some macros like "prefix", "push" etc. What is their purpose and how to I use them? I would like to sometimes add a margin to an image grid. If I just add a style="padding-right: 4ex" to the img, for example, the image size is not affected.

[mmistakes]

They grid system is fairly basic. With my latest theme and personal site I moved over to Bourbon's Neat.

But the basic idea is you include various mixins that help take care of all the maths. By default I'm using a 12 column grid but that can be changed in _sass/grid.scss if you want to go with a 16 or something else.

To make an element span 10 out of 12 columns you'd use the following mixin @include column(12,10); to make it span 6 out of 12 @include column(12,6);

Then there are mixins to add space before and after an element. @include prefix(12,1); would add 1 column before and @include suffix(12,2); would add 2 columns after.

You can also do things like @include prefix(12,0.5); and add a half column of space before. The push and pull mixins work in the same way. Instead of adding margin to an element it moves them by relatively positioning them to the left or right of the parent element.

Doing image grids/galleries can be tricky and if that's your intention I'd suggest using a more fleshed out system like Susy. It's way more customizable and meant for that sort of thing.