css - 代替幅要素を含む Susy ギャラリー

Question

Susy グリッドを使用しています。幅が異なるブロックのギャラリーを作成する必要があります。それらは 1/3、2/3、および 3/3 幅のブロックになります。ページ上にこれらのブロックが多数存在する可能性があり、ランダムな順序で配置される可能性があります。ブロックが 1 行に収まらない場合は、次の行にジャンプする必要があります。

<div class="gallery"
    <div class="item1of3">...</div>
    <div class="item1of3">...</div>
    <div class="item1of3">...</div>
    <div class="item2of3">...</div>
    <div class="item1of3">...</div>
    <div class="item3of3">...</div>
    <div class="item1of3">...</div>
    <div class="item2of3">...</div>
    <div class="item2of3">...</div>
</div>

次のコードは役に立ちません...

.item1of3 {
    @include gallery(1 of 3);
}

.item2of3 {
    @include gallery(2 of 3);
}

.item3of3 {
    @include gallery(3 of 3);
}

ギャラリー mixin は同一の要素に対してのみ機能するためです。 http://codepen.io/inliner/pen/YXWRRp

では実際に可能なのでしょうか？

私はこのようなものが必要です - http://codepen.io/anon/pen/vOKQbx しかし、マージンを処理する正しい方法で。ブロックはコンテナー内で正当化する必要があります。