title: Image CSS Masonry layout
body: <p>I'm trying to do a CSS Masonry layout with images using the code below (which is within a foreach loop in PHP):</p>
  
  <pre><code>&lt;div class="pagepix"&gt;
    &lt;img alt="Testing 02" src="/images/thumbnail/image__xeKPEyHYPAnxsnKCWMKQ_1411534017.jpg"&gt;
    &lt;img alt="Testing 01" src="/images/thumbnail/image__uVfmzTwGzakmClDShyDA_1411533981.jpg"&gt;
    &lt;img alt="Testing 05" src="/images/thumbnail/image__WmLHwllUknhfDjocHqxn_1411533993.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS is:</p>
  
  <pre><code>.pagepix{line-height:0;-webkit-column-count:2;-webkit-column-gap:0;-moz-column-count:2;-moz-column-gap:0;column-count:2;column-gap:0}
  .pagepix img{width:100%;height:auto}
  </code></pre>
  
  <p>I was wondering if there was any way of doing it so it has two small images, then one large image underneath.. example</p>
  
  <pre><code>image     |     image
  
    full width image  
  
  image     |     image
  
    full width image  
  </code></pre>
  
  <p>Does it make sense?</p>