Heretic order/disposition on a 3 columns grid - sass

Question

I want to make a simple 3 columns / 3 rows grid with Susy 2 like :
1 2 3
4 5 6
7 8 9
But the blocks are floating in a buggy and heretic order.
You can have a look :
http://img.spheerys.fr/images/2015/01/05/bug-susy.jpg
Here my HTML Markup :
<article class="block">1</article>
<article class="block">2</article>
<article class="block">3</article>
<article class="block">4</article>
<article class="block">5</article>
<article class="block">6</article>
<article class="block">7</article>
<article class="block">8</article>
<article class="block">9</article>
Here my Susy map :
$susy: (
global-box-sizing: border-box,
use-custom: (
rem: true
),
columns: 12,
column-width: 4em,
gutters: 1/4
);
And finally, my Sass :
.block
+span(4 of 12)
&:nth-child(3n)
+last
+break
What's going wrong ?

Answer 1

:nth-child counts all sibling elements. So :nth-child(3n) doesn't just apply to every 3rd .block, it applies to every 3rd sibling that is also .block. The best solution when using :nth-child is to wrap all your list items in their own parent, without other siblings.
Susy also provides a shortcut to creating this sort of gallery layout...
html:
<!-- wrap all your blocks in a div -->
<div>
<article class="block">1</article>
<article class="block">2</article>
<article class="block">3</article>
<article class="block">4</article>
<!-- more blocks... -->
</div>
sass:
.block
+gallery(4 of 12)
That should be all you need.