title: CSS Grid - How to get an image to fill grid item space
body: <p>I'm in the process of building a responsive 3x3 grid, so far this is what I have:</p>
  
  <p>You will notice that this maintains the aspect ratio of each of the images contained within the grid items when resized and it stays in a 3x3 grid (which is desired).</p>
  
  <pre><code>.people-grid {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  
  .grid-item {
    position: relative;
    display:block;
    background-size:cover;
    border:1px solid red;
  }
  
  .grid-item img {
    width:100%;
  }
  
  .grid-item-inner {
    position: absolute;
    top:0;
    margin:15px;
    bottom:0;
    width: 90%;
    background:#fdfdfd;
    border:1px solid #78a7d7;
    opacity:0.8;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3r80vyhn/" rel="nofollow noreferrer">http://jsfiddle.net/3r80vyhn/</a></p>
  
  <p>However I can't for the life of me work out how to get rid of the additional spacing to the bottom of the image. (the white space between the bottom of the dog and the red border). Is there additional grid properties I can use to assist with this?</p>
  
  <p>I'm a CSS grid newbie, so if there are alternative ways of achieving this I'm open to suggestions.</p>
  
  <p><a href="https://i.stack.imgur.com/ooc3z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ooc3z.png" alt="enter image description here"></a></p>