jquery - Masonry : fluid div で同じ列幅

Question

石積み効果のあるブログページを作ろうとしています。このフィドルをチェックしてくださいhttp://jsfiddle.net/V3rJt/

私が直面している問題は、最大幅が 1080px で、同じガター スペースを持つ 3 つの等しい列が必要な場合、問題なく動作することです。

しかし、ブラウザ ウィンドウのサイズを変更すると、レイアウトを 2 つの等しい列に切り替えて (現在利用可能なスペースを埋める必要があり、幅が縮小されます)、さらに 1 つの列のブログ投稿になります。

下のこの画像を参照してください

誰かが私の問題を解決してくれるなら、それは素晴らしいことです。私の英語で申し訳ありませんが、私は英語を話す人ではありません。

HTML

<div class="section_bg">
            <div class="insection_bg sparq_blog js-masonry"  data-masonry-options='{ "columnWidth": 60, "gutter": 10 }'>
                <div class="blogpost">
                    <img src="http://placehold.it/200x200" />
                    <h2>Blog post title</h2>
                    <span class="blogpost_date">17th August 2013</span>
                    <p class="sparq_ex">Lorem ipusm is a great dummy text to place for in blog post and any other contentLorem ipusm is a great dummy text to place for in blog post and any other content..</p>
                    <a class="readmore" href="">Read More</a>
                </div>
                <div class="blogpost">
                    <img src="http://placehold.it/200x200" />
                    <h2>Blog post title</h2>
                    <span class="blogpost_date">17th August 2013</span>
                    <p class="sparq_ex">Lorem ipusm is a great dummy text to place for in blog post and any other content.</p>
                    <a class="readmore" href="">Read More</a>
                </div>
                <div class="blogpost">
                    <img src="http://placehold.it/200x200" />
                    <h2>Blog post title</h2>
                    <span class="blogpost_date">17th August 2013</span>
                    <p class="sparq_ex">Lorem ipusm is a great dummy text to place for in blog post and any other content.</p>
                    <a class="readmore" href="">Read More</a>
                </div>
                <div class="blogpost">
                    <img src="http://placehold.it/200x200" />
                    <h2>Blog post title</h2>
                    <span class="blogpost_date">17th August 2013</span>
                    <p class="sparq_ex">Lorem ipusm is a great dummy text to place for in blog post and any other content.</p>
                    <a class="readmore" href="">Read More</a>
                </div>
            </div>
        </div>

CSS

.section_bg {
    padding: 100px 0;
    overflow: hidden;
    background: #f7f6f6;

}
.insection_bg {
    max-width: 1080px;
    margin: 0 auto;
}
.blogpost {
    background: #ffffff;
    max-width: 26%;
    padding: 20px;
    float: left;
    margin-bottom: 25px;
    box-shadow: 0px 2px 2px -1px #ccc;
}
.blogpost img {
    display: block;
    margin: 0 auto;
    width: 100%;
}
.masonry .blogpost {
  margin-bottom: 10px;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}