html - この種の CSS マージンの問題を修正するにはどうすればよいですか?

Question

私はこのようなHTMLをいくつか持っています、

<div class="gallery">
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>
</div>

この HTML を使用して行う必要があるのは、その中に 3 つの div をテーブル行としてgallery表示することです。gallery-itemこの場合、6gallery-itemは 2 行で表示されます。

私の問題は、div にマージンを使用する場合gallery-itemです。各行の 3 番目の div の右マージンを削除する必要があり、3 div は の中央に配置する必要がありますgallery。

これは私のCSSです

.gallery {
    width: 560; 
    background: red;
}

.gallery-item {
    background: gray;
    width: 172px;
    height: 200px;
    display: inline-block;
    margin: 0 10px 10px 0;
} 

理解を深めるためのJS フィドル。

誰かが私を助けてくれることを願っています。ありがとうございました。