title: Masonry Layout in CSS3?
body: <p>I try to use the following structure to generate the layout described below.</p>
  
  <pre><code>&lt;div class="flexbox"&gt;
    &lt;div class="box box1"&gt;child 1&lt;/div&gt;
    &lt;div class="box box2"&gt;child 2&lt;/div&gt;
    &lt;div class="box box3"&gt;child 3&lt;/div&gt;
    &lt;div class="box box4"&gt;child 4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I made an example for that <a href="http://jsfiddle.net/8hHDg/2/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The layout should be as follows:</p>
  
  <ul>
  <li>if there is only one box inside the flexbox it should have 50% of the width inside the flexbox (see following figure)</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/S7Nke.jpg" alt="enter image description here"></p>
  
  <ul>
  <li>if there are two boxes they both should take 50% of the space inside the flexbox</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/wll6k.jpg" alt="enter image description here"></p>
  
  <ul>
  <li>if there are three boxes, each box should take 50% of the space, while the first two boxes are in row 1 and the third box appears in row 2  </li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/MAKNr.jpg" alt="enter image description here"></p>
  
  <p><strong>How can I achieve this kind of layout with css?</strong></p>
  
  <p><strong>Edit:</strong> The boxes might not have the same height. This means they should fill the remaining space vertically. The width is always the same. See the following image for an example.</p>
  
  <p><img src="https://i.stack.imgur.com/g99hu.jpg" alt="enter image description here"></p>
  
  <p>Edit: I found a way to make masonry with pure css see here: <a href="http://jsfiddle.net/confile/aGXzU/" rel="nofollow noreferrer">http://jsfiddle.net/confile/aGXzU/</a> </p>
  
  <p>The problem is that the boxes are in the wrong order. They should be from left to right and from top to bottom like this: </p>
  
  <pre><code>1 2 3
  4 5 6 
  7 8 9
  </code></pre>
  
  <p>Is there a way to get this with css and only little javascript?</p>