CODEWITHSUNDEEP
csscompass-sasssasssusy-compass
styler
styler

Reputation: 16491

using susy compass plugin how do I add margin onto each of my elements correctly?

I have 4 elements with widths set at @include span-columns(3,12) this outputs each element at 25% which is fine, what I would also like to do is add margin to each element but doing this breaks the layout of these elements as the 25% width and % margin get added together. Can anyone advise how I can combine the margin in with the width?

SCSS

    .m-info-col{

      .col{
        @include span-columns(3,12);
// tried this margin-right: columns(.5,12);

        &:last-child{
          @include omega;
        }
      }
    }

Upvotes: 0

Views: 272

Answers (1)

greyman
greyman

Reputation: 121

If you have your container set up with 12 columns and have set $gutter-width to a value, then each column has $gutter-width gap (margin if you like).

If you implement susy grid backgrounds using:

$show-grid-backgrounds : true;

and inside your container context:

@include susy-grid-background;

You will see the gutters behind your design.

You can also add padding into the span-columns mixin (3rd param). This does not always work as expected though.

Another way I have used is the squish mixin and it adds columns as margins. This works quite well but I have not tried using 0.5 columns as the squish amount.

Upvotes: 1

Related Questions