html - CSS grid containing divs of different height -

i'm trying grid work want to. contains 2 different sizes of elements , want layout masonry without using lib, since it's quite simple layout can't head around. see on image 2 small items jump down float. can me here? grid gonna repeatable same structure.

reference image:

.grid {    width: 100%;  }  .half {    float: left;    width: 50%;    max-width: 1000px;    border: 1px solid #000000;  }  .forth {    float: left;    width: 25%;    max-width: 500px;    border: 1px solid #000000;  }

<section class="grid">    <div class="half">      <img src="http://placehold.it/1000x1000">    </div>    <div class="forth">      <img src="http://placehold.it/500x500">    </div>    <div class="forth">      <img src="http://placehold.it/500x500">    </div>    <div class="half">      <img src="http://placehold.it/1000x1000">    </div>    <div class="forth">      <img src="http://placehold.it/500x500">    </div>    <div class="forth">      <img src="http://placehold.it/500x500">    </div>  </section>

harrys answers works , if using grid whole site approach go if not wish further nest elements perhaps simpler solution.

simply move 2 div.fourth in front of first div.half , float them right. float second div.half right , bob's uncle.

<section class="grid">     <div class="forth right">         <img src="http://placehold.it/500x500?text=block+1">     </div>     <div class="forth right">         <img src="http://placehold.it/500x500?text=block+2">     </div>     <div class="half">         <img src="http://placehold.it/1000x1000?text=block+3">     </div>     <div class="half right">         <img src="http://placehold.it/1000x1000?text=block+4">     </div>     <div class="forth">         <img src="http://placehold.it/500x500?text=block+5">     </div>     <div class="forth">         <img src="http://placehold.it/500x500?text=block+6">     </div> </section> 

i suggest applying box-sizing: border-box info here

it make more sense apply max width .grid , remove it's children & make img ‘responsive’

// tidy demo // ================================= * {     box-sizing: border-box; } // apply max width image img {     max-width: 100%;     height: auto;     display: block; } // apply max width grid container .grid {     max-width: 2000px;     width: 100%;     overflow: hidden;     margin: 0 auto; } // =================================  // orignal code // ================================= .grid {     width: 100%; }  .half {     float: left;     width: 50%;     max-width: 1000px; // max width applied grid don't need these lines     border: 1px solid #000000; }  .forth {     float: left;     width: 25%;     max-width: 500px; // max width applied grid don't need these lines     border: 1px solid #000000; } // =================================  // bit need add // ================================= .right {     float: right; } // =================================  // can see difference // ================================= .right {     background-color: #3cf; } .right img {     opacity: 0.8; } // ================================= 

finally example on codepen http://codepen.io/samwalker/pen/mwplvm?editors=110