Unique Figcaption Changes Image Size in Grid Layout - html

Question

While testing the desktop version of a template I am creating in Chrome I noticed when my figcaptions are all the same (example: Caption) or similar (example: Caption One... Caption Two) my images and caption line up fine. Once I make them unique the images start to change sizes and nothing lines up correctly. I'm not adding any sort of crazy captions, just simple one or two word descriptions like "Hello World" or "Example Caption". I have ran it through dev tools and looked at a few other posts on stack overflow about issues concerning figcaptions but noting seems to be working. All of my images are the same size. I'm sure it is something simple that I am just overlooking but I would appreciate a new set of eyes at this point. Thanks in advance for your time and assistance.
* {
margin: 0;
padding: 0;
}
.content-section {
display: grid;
grid-template-columns: auto auto auto;
}
figure img {
width: 100%;
height: auto;
}
<!--lines up correctly-->
<section class="content-section">
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
</section>
<!--lines up incorrectly-->
<section class="content-section">
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Some Words</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Hello World</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Something Else</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption Five</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Example</figcaption>
</figure>
</section>

Answer 1

and answering my own question...
.content-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Lines up perfect