title: CSS GRID IMAGE GALLERY: How to resize all images to be the same size and maintain the same distance?
body: <p>Just trying to create a simple image gallery that's 3 x 3 using CSS grid. 
  I thought using a container with the following css styles would resize them all equally: </p>
  
  <pre><code>.portfolio {
    display: grid;
    grid-template-rows: repeat(3, 200px);
    grid-template-columns: repeat(3, 200px);
    grid-gap: 20px; 
    justify-content: center;
    padding: 10%;
  }
  </code></pre>
  
  <p>But all the images appear on my browser overlapping and different sizes. Now I can take the long, very messy approach and start resizing everything, I guess. But isn't there an easy way just to resize all of them to be equal? </p>