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

【问题标题】：Unique Figcaption Changes Image Size in Grid Layout独特的 Figcaption 更改网格布局中的图像大小
【发布时间】：2019-01-19 22:13:39
【问题描述】：

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

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

【问题讨论】：

您能否告诉我们所需的输出是什么？每行有多少列？列宽应该是固定的还是整行的一部分？我认为屏幕截图会有所帮助。
@HoomanBahreini 每行有 3 列，所需的输出是 3 列 2 行，其中所有图像和标题都排成一行（就像我提供的代码 sn-p 的第一部分一样）我说只要我所有的字幕相同或相似，它看起来就很好。一旦我开始编辑它们来描述图像，我就会遇到问题。

标签： html css grid figure

【解决方案1】：

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

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

完美排列

【讨论】：