Masonry : Same Column width in fluid div

Question

I am trying to make a blog page with masonry effect. Check this fiddle http://jsfiddle.net/V3rJt/

The problem i am facing is that, suppose i have a max width of 1080px and i want 3 equal column with same gutter space then its working fine no problem.

But when i resize my browser window then i want the layout to switch on 2 equal columns (must fill the space available right now its shrinking down in width) and further to one column blog post.

See this image below

If someone can help me out with the problem then it would be great. Sorry for my english i am not an english speaker.

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;
}

Answer 1

Rather than sizing the columns based on a specific width (as is done in the jsfiddle), use element sizing as specified in the documentation: http://masonry.desandro.com/options.html#element-sizing

Then the column-width will be pulled from the size of the element (which you can then set as a percentage of the page width via CSS). Then you can use media queries to change the width of each item based on screen size. Pretty clearly explained in the documentation.

Here is a fiddle for you: http://jsfiddle.net/V3rJt/3/

The javascript:

$(document).ready(function() {

      function masonry() {
     //masonry
var container = document.querySelector('.js-masonry');
var msnry = new Masonry( container, {
  itemSelector: '.blogpost',
  columnWidth: '.blogpost'
});

  };

  masonry();

});

The CSS:

/* I also used box-sizing:border-box; because it makes the sizing easier with % and px */

.blogpost {
    background: #ffffff;
    width: 31%;
    margin:0 1% 25px;
    padding: 20px;
    float: left;
    box-shadow: 0px 2px 2px -1px #ccc;
}


@media (max-width: 600px) {
  /* 10 columns for larger screens */
  .blogpost { width: 48%; }
}