susy grid - can't get it to take up three columns

Question

I have a problem.. i cant get my elements take up three cols, i have set it to span 4 of 12 that should equal to 3 column. i has able to do it with @include omega; on last-child but that is not really a solution when i have more than 3 elements. i know its because it add margins-right to the third element, but how would i get around that? so that it removes the margin-right on every third element?

Scss

$susy: (
columns                     : 12,
gutters                     : 1/2,
container                   : 90%,
box-sizing                  : border-box,
);

$small                          : 30em;
$medium                     : 47em;
$large                          : 75em;

// layout
.layout {
    @include container();
.cases {
background-color: green;
    .case {
        @include span(4);
        background-color: blue;
        }
    }
}

HTML

        <article class="case">
            <a href="case.php">
                <div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
                    <div class="case-info">
                        <header><h3>Case#1</h3></header>
                    </div>
                </div>
            </a>
        </article>
        <article class="case">
            <a href="case.php">
                <div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
                    <div class="case-info">
                        <header><h3>Case#1</h3></header>
                    </div>
                </div>
            </a>
        </article>
        <article class="case">
            <a href="case.php">
                <div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
                    <div class="case-info">
                        <header><h3>Case#1</h3></header>
                    </div>
                </div>
            </a>
        </article>

Answer 1

1. First of all you need to import Susy in to your sass file.
2. Further more you need to get rid of the margin-right for the last child.

Use this code and it should work:

@import "susy";

$susy: (
columns                     : 12,
gutters                     : 1/2,
container                   : 90%,
);

// layout
.layout {
    @include container();
}

.case {
  background-color: blue;
  @include span(4);
    &:nth-child(3n) {
     @include last;
  }
}

Answer 2

have you tried the gallery() mixin (see the docs)? It's built to handle this use-case exactly.

.case {
  @include gallery(4);
}