title: Flexbox collage grid layout
body: <p>Is it possible make this layout with pure css without the flexbox properties?
  I try to create the photo gallery collage for the VC slider. Is it possible to use here grid properties? I use nesting flexbox, what is the best practice? <a href="http://codepen.io/palaniichukdmytro/pen/wovRRR" rel="nofollow noreferrer">flexbox gallery collage</a></p>
  
  <pre><code>&lt;div class="contaner"&gt;
  &lt;div class="item"&gt;
  &lt;img    src="http://www.telegraph.co.uk/content/dam/pets/2016/05/31/66900964_AR6KDA-CAT-BIRD-PETS-large_trans++XgrBd0P19THPvf9738yRPd-JR69WJ8Rdth_SfFJ_dbY.jpg" alt="" /&gt;
   &lt;/div&gt;
    &lt;div class="item item-flex"&gt;
  &lt;img class="item-flex-img-big" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /&gt;
  &lt;img class="item-flex-img" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /&gt;
   &lt;/div&gt;
   &lt;div class="item item-flex"&gt;
     &lt;img class="item-flex-img" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /&gt;
     &lt;img class="item-flex-img-big" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;style&gt;
  img {
   width: 100%;
   max-width: 100%;
   object-fit: cover;
   object-position:50% 50%;
   height: 100%;
  }
  
  .contaner {
    display: flex;
  .item {
   flex: 1 1 100%;
  }
  .item + .item {
    padding-left: 10px;
  }
  .item-flex {
   display: flex;
   flex-direction: column;
  }
  .item-flex {
   img + img {
     margin-top:10px;
   }
  }
  .item-flex-img{
   height: 40%;
  
  }
   .item-flex-img-big{
    height: 60%;
  
  }
  }
  &lt;/style&gt;
  </code></pre>