title: Images in a flexbox grid
body: <p>i was trying to create an image grid with flexbox with two columns. In the first column i've placed a single image(600x600px) and in the second column i've placed 4 images (300x300px) 2 for each row.</p>
  <p>In the second column there is some space between the images that gives a staggered result.
  Here is the code that i was testing, how could i remove the white space between the images?
  Thanks for the help</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* ! Grid System */
  .grid { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row; flex-wrap: nowrap;}
  .grid-wrap{flex-wrap: wrap;}
  .grid-horizontal{display: flex; flex-flow: row; flex-wrap: nowrap; border: solid 1px yellow; }
  .grid--center{justify-content: center;}
  .col{ flex: 1;}
  
  [class*='col-'] { position: relative;}
  
  .col-20{ width: 20%; }
  .col-25{ width: 25%; }
  .col-30{ width: 30%; }
  .col-33{ width: 33.33%; }
  .col-50{ width: 50%; }
  .col-70{ width: 70%; }
  .col-80{ width: 80%; }
  .col-100{ width: 100%; }
  
  @media (max-width: 991px) {
    .tab-20 { width: 20%; }
    .tab-25 { width: 25%; }
    .tab-33 { width: 33.33%; }
    .tab-50 { width: 50%; }
    .tab-100 { width: 100%; }
  }
  
  @media (max-width: 580px) {
    .grid--sma{flex-wrap: wrap;}
    [class*='col-'] { width: 100%;}
    .sma-20 { width: 20%; }
    .sma-25 { width: 25%; }
    .sma-33 { width: 33.33%; }
    .sma-50 { width: 50%; }
    .sma-100 { width: 100%; }
  
    .sma-hide{display:none}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="container" style="border:solid 1px red; height:auto"&gt;
      &lt;div class="grid grid--sma" style="max-height:2600px"&gt;
        &lt;div class="col-50 sma-100" style=" border:solid 1px black;"&gt;
  
          &lt;img src="img/Square-big.jpg" alt="" style="width:100%"&gt;
  
        &lt;/div&gt;
  
        &lt;div class="col-50 sma-100" style=" border:solid 1px black;"&gt;
  
          &lt;img src="img/Square-small-1.jpg" alt="" style="width:49%"&gt;
          &lt;img src="img/Square-small-2.jpg" alt="" style="width:49%"&gt;
  
          &lt;img src="img/Square-small-2.jpg" alt="" style="width:49%"&gt;
          &lt;img src="img/Square-small-1.jpg" alt="" style="width:49%"&gt;
  
        &lt;/div&gt;
  
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>