How to keep image proportions the same when using grid?

Question

I have 6 headshots I am displaying on a page and I am using grid to separate them into 2 rows and 3 columns. Each image is the same size, but for some reason, the second image in each row is slightly bigger than the first image and the 3rd image is even bigger than the second. How do I keep the images to all scale the same and keep the design responsive when using grid?

It appears at extremely large screen widths the images are the same size, but as the width of the screen narrows that's when the image sizes start to not match each other.

#team-page .grid {
    text-align: center;
}

#team-page .card-container {
  display: grid;
  grid-gap: 20px 0;
  grid-template-columns: auto auto auto;
}

.card {
  display: inline-block;
}

.img-wrap {
  text-align: center;
  margin: 0 10px 10px;
  border-radius: 2px;
  background: #000;
  display: flex;
  flex-direction: column;
}

.text-wrap {
  text-align: left;
  font-size: 18px;
  margin: 0 5px;
  padding-top: 5px;
}

@media (max-width: 1100px) {
  #team-page .card-container {
    grid-template-columns: auto auto;
  }
}

@media (max-width: 600px) {
  #team-page .card-container {
    display: block;
  }
}

<div id="team-page" class="page-width">
    <div class="grid">
        <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
            <div class="card-container">
                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" /> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

update grid-template-columns: repeat(3, minmax(0, 1fr)); in .card-container, so all columns will be same width:

#team-page .card-container {
  display: grid;
  grid-gap: 20px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}