title: Bootstrap & Masonry Gutter - Responsive
body: <p>I've been banging my head for the past 12 hours trying to find a solution to this problem, but I still haven't managed to do so...</p>
  
  <p>I want to set a percentage based value to the Masonry itemSelector (50%, 33.333333% and 25% depending on how many columns I want - 2, 3 or 4) and have a 15px gutter between the items.</p>
  
  <p>How I see it is if I want 4 columns each column should be 25% wide minus 15px (the gutter), but I just can't figure out a way to do it. I must be in some kind of brain lock...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="content"&gt;
          &lt;article class="post post-columns"&gt;asd&lt;/article&gt;
          &lt;article class="post post-columns"&gt;dsa&lt;/article&gt;
          &lt;article class="post post-columns"&gt;asd&lt;/article&gt;
          &lt;article class="post post-columns"&gt;dsa&lt;/article&gt;
          &lt;article class="post post-columns"&gt;asd&lt;/article&gt;
          &lt;article class="post post-columns"&gt;dsa&lt;/article&gt;
          &lt;article class="post post-columns"&gt;asd&lt;/article&gt;
          &lt;article class="post post-columns"&gt;dsa&lt;/article&gt;
      &lt;/div&gt;
  &lt;div class="container"&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>article {
      background: #333;
      margin-bottom: 15px;
      height: 50px;
  }
  .post-columns {
      width: 25%;
      float: left;
  }
  .container {
      background: #dadada;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function () {
      var container = $('#content');
  
      container.masonry({
          itemSelector: '.post',
          columnWidth: '.post-columns',
          gutter: 0
      }); 
  });
  </code></pre>
  
  <p>Here's a demo: <a href="http://jsfiddle.net/4urJT/3/" rel="nofollow">http://jsfiddle.net/4urJT/3/</a></p>
  
  <p>Thank you!</p>