Image matrices defined in Susy aren't lining up properly

Question

I think I managed to solve most of my starting problems with Susy. The only odd thing left I can't figure out is why it behaves the way it does when creating an image matrix.

Here's my setup:

$total-columns: 24;
$column-width: 6%;
$gutter-width: 1%;
$grid-padding: 0;

$container-style: magic; 

Here's the HTML code:

    <section name="Projekte" class="projects" role="main">
        <hgroup>
            <h1 class="maintitle">Unsere Projekte</h1>
            <h2 class="subtitle">Subtitle</h2>
        </hgroup>
        <ul class="moodlegrid">
            <li><a href=""></a><img title="Projekte1" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte2" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte3" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte4" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte5" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte6" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte7" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte8" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte9" src="img/projekte.jpg"  /></li>           
        </ul>
        <div class="proper"></div>
    </section><!-- end section -->

This should be a 3x3 matrix of images and elsewhere on the page there should be a 7x4 matrix of images, but both act odd. Both don't respect that there are 3 margin columns at both sides as well as their position.

The supposed 7x4 matrix looks like this, and the supposed 3x3 matrix looks like this.

Here's the CSS code:

section {
    @include boxcolor($section-container);
    width: 100%;
    @include no-bullets;
    @include box-shadow(black 2px 2px 10px);
    margin-bottom: 2*1.5em;
    padding-bottom: 2*1.5em;
    clear: both;
}

.customers li {
    @include squish(3,3);
    @include span-columns(2,18);
    @include nth-omega(7n);
    margin-left:0;
}

.moodlegrid li{
    @include squish(3,3);
    @include span-columns(6,18);
    @include nth-omega(3n);
    margin-left:0;
}

That's it for the moment. Has anybody a slightest idea why Susy is behaving like this? Especially on the 3x3 matrix, where everything should basically fit in: 6 + 3*6 equals to the number of columns I have set. Confusing somehow.

Answer 1

You don't want to squish the same elements that you are using for you columns. You want to squish the parent. Currently, squish is not doing anything, because you override it with span-columns.

.customers {
  @include squish(3,3);
  li {
    @include span-columns(2,18);
    @include nth-omega(7n);
  }
}

.moodlegrid 
  @include squish(3,3);
  li{
    @include span-columns(6,18);
    @include nth-omega(3n);
  }
}