独特的 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);
}

排队完美

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

Unique Figcaption Changes Image Size in Grid Layout

html

css

grid

figure