title: img div not fitting a css grid cell
body: <p>I'm trying to sort out a css grid to fit my imgs on this tribute page project from free code camp. I managed to do the grid as I wanted to but I can't seem to fit the images perfectly in each cell. Some of them are not filling the entire cell and others are exceeding it. This is the code: </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>.img-div-container {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    grid template-rows: 5px 5px;
    margin-left: 100px;
    margin-right: 100px;
    grid-column-gap: 5px;
    align-content: stretch;
    justify-content: stretch;
    background: hsla(199, 19%, 62%, 0.21);
    border: 2px outset hsla(199, 19%, 62%, 0.21)
  }
  
  .image-bigger {
    grid-column: 1/2;
    grid-row: 1/3;
    place-self: stretch;
    ;
  }
  
  .image-wider {
    grid-column: 2/4;
    grid-row: 2/3;
    place-self: end stretch;
    width: 95%;
  }
  
  .image-normal,
  .image-bigger,
  {
    place-self: stretch;
    justify-self: flex-start;
  }
  
  img {
    width: 100%;
    height: 87%;
  }
  
  .normal {
    width: 100%;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="img-div-container"&gt;
    &lt;div class="image-bigger"&gt;&lt;img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"&gt;&lt;/div&gt;
  
    &lt;div class="image-normal"&gt;&lt;img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"&gt;&lt;/div&gt;
    &lt;div class="image-normal"&gt;&lt;img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"&gt;&lt;/div&gt;
    &lt;div class="image-wider"&gt;&lt;img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm sorry the code got a little bit messy when trying to fix this.</p>