title: jquery masonry 60% and 40% columns
body: <p>I'm trying to put together a responsive jquery masonry layout - but allow for the first box to be 60% width (with 100% height), and the other two boxes to be 40% width (with 50% height).</p>
  
  <p>I can get it working if the columns are set to 50%, but I cannot seem to get it to work with the first box being 60%, and the other two being 40% width. Masonry puts the second two boxes underneath my first box instead.</p>
  
  <p>Here's the code that I'm using (which works with 3 boxes, all at 50% width). I've hashed out the CSS which I was trying to use to make it 60% / 40%.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="grid"&gt;
          &lt;div class="grid-sizer"&gt;&lt;/div&gt;
          &lt;div class="grid-item grid-item-width60 grid-item-height100"&gt;aa&lt;/div&gt;
          &lt;div class="grid-item grid-item-width40 grid-item-height50"&gt;bb&lt;/div&gt;
          &lt;div class="grid-item grid-item-width40 grid-item-height50"&gt;cc&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$('.grid').masonry({
          columnWidth:'.grid-sizer',
          itemSelector:'.grid-item',
          percentPosition:true
      });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>section.slideshow .grid{width:100%;height:100%;background:#000}
  section.slideshow .grid-sizer,section.slideshow .grid-item{width:50%}
  
  /*section.slideshow .grid-item-width60{width:60%}
  section.slideshow .grid-item-width40{width:40%}*/
  
  section.slideshow .grid-item-height100{height:100%;background:#f0f}
  section.slideshow .grid-item-height50{height:50%;background:#f99}
  </code></pre>
  
  <p>Any help would be appreciated! I've tried following what is said to do with responsive layouts here: <a href="https://masonry.desandro.com/layout.html" rel="nofollow noreferrer">https://masonry.desandro.com/layout.html</a></p>