title: Masonry : Same Column width in fluid div
body: <p>I am trying to make a blog page with masonry effect. Check this fiddle <a href="http://jsfiddle.net/V3rJt/" rel="nofollow noreferrer">http://jsfiddle.net/V3rJt/</a></p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>See this image below</p>
  
  <p><img src="https://i.stack.imgur.com/5XuFZ.png" alt="enter image description here"></p>
  
  <p>If someone can help me out with the problem then it would be great. Sorry for my english i am not an english speaker.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="section_bg"&gt;
              &lt;div class="insection_bg sparq_blog js-masonry"  data-masonry-options='{ "columnWidth": 60, "gutter": 10 }'&gt;
                  &lt;div class="blogpost"&gt;
                      &lt;img src="http://placehold.it/200x200" /&gt;
                      &lt;h2&gt;Blog post title&lt;/h2&gt;
                      &lt;span class="blogpost_date"&gt;17th August 2013&lt;/span&gt;
                      &lt;p class="sparq_ex"&gt;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..&lt;/p&gt;
                      &lt;a class="readmore" href=""&gt;Read More&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="blogpost"&gt;
                      &lt;img src="http://placehold.it/200x200" /&gt;
                      &lt;h2&gt;Blog post title&lt;/h2&gt;
                      &lt;span class="blogpost_date"&gt;17th August 2013&lt;/span&gt;
                      &lt;p class="sparq_ex"&gt;Lorem ipusm is a great dummy text to place for in blog post and any other content.&lt;/p&gt;
                      &lt;a class="readmore" href=""&gt;Read More&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="blogpost"&gt;
                      &lt;img src="http://placehold.it/200x200" /&gt;
                      &lt;h2&gt;Blog post title&lt;/h2&gt;
                      &lt;span class="blogpost_date"&gt;17th August 2013&lt;/span&gt;
                      &lt;p class="sparq_ex"&gt;Lorem ipusm is a great dummy text to place for in blog post and any other content.&lt;/p&gt;
                      &lt;a class="readmore" href=""&gt;Read More&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="blogpost"&gt;
                      &lt;img src="http://placehold.it/200x200" /&gt;
                      &lt;h2&gt;Blog post title&lt;/h2&gt;
                      &lt;span class="blogpost_date"&gt;17th August 2013&lt;/span&gt;
                      &lt;p class="sparq_ex"&gt;Lorem ipusm is a great dummy text to place for in blog post and any other content.&lt;/p&gt;
                      &lt;a class="readmore" href=""&gt;Read More&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>