title: How to create a grid of images using flexbox that fully wraps around a main image?
body: <p>I want to create a grid of images that first has a large featured image, then to it's right, has a grid of 4 (2 on each row).. and then underneath that, rows of 4 images at a time.</p>
  
  <p>Loosely based on <a href="http://news.microsoft.com/stories/" rel="nofollow">this design</a>.</p>
  
  <p>I think flexbox would probably be able to nail this one.</p>
  
  <p>Say I have some markup like this</p>
  
  <pre><code> &lt;div class="image-grid"&gt;
     &lt;div&gt;
      &lt;img src="https://unsplash.it/1024/1024"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1000/800"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1100/1000"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1120/1000"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1130/1024"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1101/1024"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1020/1024"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1021/1024"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1002/1024"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1003/1024"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1004/1024"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://unsplash.it/1005/1024"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with CSS</p>
  
  <pre><code>.image-grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  img {
    width: 100%;
  }
  
  .image-grid &gt; div:first-child {
    flex-basis: 50%;
  }
  
  .image-grid &gt; div {
    flex-basis: 25%;
  }
  </code></pre>
  
  <p>this <em>almost</em> does what I need it to. Codepen <a href="http://codepen.io/magician11/pen/ZWRbVv?editors=0100" rel="nofollow">here</a>.</p>
  
  <p>I need two things fixed though...</p>
  
  <ol>
  <li>display 4 images to the right of the featured image, instead of the current 2.</li>
  <li>stretch each image to fit it's space so it's a tight grid (no spacing around any image). I'm thinking of using the <code>object-fit</code> CSS property but I haven't got it working yet.</li>
  </ol>
  
  <p>Thank you.</p>