html - 独特的 Figcaption 更改网格布局中的图像大小

Question

在测试我在 Chrome 中创建的模板的桌面版本时，我注意到当我的图形字幕完全相同(例如:字幕)或类似(例如:字幕一...字幕二)时，我的图像和字幕排列得很好。一旦我让它们变得独一无二，图像就会开始改变大小，并且没有任何东西正确排列。我没有添加任何疯狂的标题，只是简单的一两个词描述，如“Hello World”或“Example Caption”。我已经通过开发工具运行它，并查看了关于堆栈溢出的其他一些关于无形字幕问题的帖子，但注意到似乎有效。我所有的图像都是相同的大小。我敢肯定这是我忽略的简单事情，但此时我希望能有新的眼光。预先感谢您的时间和帮助。

* {
  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

并回答我自己的问题...

.content-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

完美排列