无法获得合理的网格布局来处理长标题

Question

我从这个合理的图片库开始，它看起来效果很好。

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.child {
  flex: 1 1 auto;
}

.child a {
  display: flex;
  height: 200px;
  width: 100%;
}

img {
  object-fit: cover;
  height: 100%;
  flex: 1 1 auto;
}

.child a:hover {
  filter: brightness(0.95);
}

<div class="gallery">
  <div class="child"><a href="https://placehold.co/600x400.png"><img src="https://placehold.co/600x400.png"></a></div>
  <div class="child"><a href="https://placehold.co/400x600.png"><img src="https://placehold.co/400x600.png"></a></div>
  <div class="child"><a href="https://placehold.co/400x700.png"><img src="https://placehold.co/400x700.png"></a></div>
  <div class="child"><a href="https://placehold.co/500x400.png"><img src="https://placehold.co/500x400.png"></a></div>
  <div class="child"><a href="https://placehold.co/900x400.png"><img src="https://placehold.co/900x400.png"></a></div>
  <div class="child"><a href="https://placehold.co/400x900.png"><img src="https://placehold.co/400x900.png"></a></div>
  <div class="child"><a href="https://placehold.co/700x400.png"><img src="https://placehold.co/700x400.png"></a></div>
  <div class="child"><a href="https://placehold.co/600x600.png"><img src="https://placehold.co/600x600.png"></a></div>
  <div class="child"><a href="https://placehold.co/800x400.png"><img src="https://placehold.co/800x400.png"></a></div>
  <div class="child"><a href="https://placehold.co/500x300.png"><img src="https://placehold.co/500x300.png"></a></div>
 </div>

然后，我想添加字幕。经过大量修改后，我得到了下面带有链接和标题的代码。看起来好像可以工作。

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.child {
  display: grid;
}

.child a {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  height: 200px;
  width: 100%;
}

img {
  object-fit: cover;
  height: 100%;
  flex: 1 1 auto;
}

.caption {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  text-align: left;
  padding: 1em;
  color: white;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  font-family: Mulish;
}

.child a:hover {
  filter: brightness(0.95);
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

<div class="gallery">
  <div class="child"><a href="https://placehold.co/600x400.png"><img src="https://placehold.co/600x400.png"></a><div class="caption">Lorem ipsum dolor sit amet.</div></div>
  <div class="child"><a href="https://placehold.co/400x600.png"><img src="https://placehold.co/400x600.png"></a><div class="caption">Qui nobis exercitationem</div></div>
  <div class="child"><a href="https://placehold.co/400x700.png"><img src="https://placehold.co/400x700.png"></a><div class="caption">Est quas dolores.</div></div>
  <div class="child"><a href="https://placehold.co/500x400.png"><img src="https://placehold.co/500x400.png"></a><div class="caption">Qui nihil aliquid.</div></div>
  <div class="child"><a href="https://placehold.co/900x400.png"><img src="https://placehold.co/900x400.png"></a></div>
  <div class="child"><a href="https://placehold.co/400x900.png"><img src="https://placehold.co/400x900.png"></a><div class="caption">Nam internos?</div></div>
  <div class="child"><a href="https://placehold.co/700x400.png"><img src="https://placehold.co/700x400.png"></a><div class="caption">Eos saepe soluta et nesciunt aperiam.</div></div>
  <div class="child"><a href="https://placehold.co/600x600.png"><img src="https://placehold.co/600x600.png"></a><div class="caption">Sed dolor tempore sit pariatur earum et.</div></div>
  <div class="child"><a href="https://placehold.co/800x400.png"><img src="https://placehold.co/800x400.png"></a><div class="caption">Ea voluptatum nulla ut eveniet voluptate. </div></div>
  <div class="child"><a href="https://placehold.co/500x300.png"><img src="https://placehold.co/500x300.png"></a><div class="caption">Rem libero asperiores. </div></div>
 </div>

但它因长标题而失败。

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.child {
  display: grid;
}

.child a {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  height: 200px;
  width: 100%;
}

img {
  object-fit: cover;
  height: 100%;
  //flex: 1 1 auto;
}

.caption {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  text-align: left;
  padding: 1em;
  color: white;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  font-family: Mulish;
  //width: 300px;
}

.child a:hover {
  filter: brightness(0.95);
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

<div class="gallery">
  <div class="child"><a href="https://placehold.co/600x400.png"><img src="https://placehold.co/600x400.png"></a><div class="caption">Lorem ipsum dolor sit amet. Ut corrupti voluptatem non quia voluptatum ut dolorem voluptates ut dicta labore eos saepe molestiae et aperiam tempora.</div></div>
  <div class="child"><a href="https://placehold.co/400x600.png"><img src="https://placehold.co/400x600.png"></a><div class="caption">Qui nobis exercitationem nam quisquam excepturi qui minus necessitatibus eum veritatis minus.</div></div>
  <div class="child"><a href="https://placehold.co/400x700.png"><img src="https://placehold.co/400x700.png"></a><div class="caption">Est quas dolores ut odio commodi aut dolorum ipsum.</div></div>
  <div class="child"><a href="https://placehold.co/500x400.png"><img src="https://placehold.co/500x400.png"></a><div class="caption">Qui nihil aliquid et fuga molestias qui consectetur corrupti.</div></div>
  <div class="child"><a href="https://placehold.co/900x400.png"><img src="https://placehold.co/900x400.png"></a></div>
  <div class="child"><a href="https://placehold.co/400x900.png"><img src="https://placehold.co/400x900.png"></a><div class="caption">Nam internos perspiciatis et quae numquam ea doloribus nesciunt?</div></div>
  <div class="child"><a href="https://placehold.co/700x400.png"><img src="https://placehold.co/700x400.png"></a><div class="caption">Eos saepe soluta et nesciunt aperiam qui ducimus consectetur aut libero nesciunt ab voluptas unde qui asperiores animi.</div></div>
  <div class="child"><a href="https://placehold.co/600x600.png"><img src="https://placehold.co/600x600.png"></a><div class="caption">Sed dolor tempore sit pariatur earum et consequatur mollitia ad earum voluptatum ut fugiat consequatur aut eligendi voluptate. Id fugiat aliquid et porro quod et galisum rerum sed fugiat totam At voluptate temporibus.</div></div>
  <div class="child"><a href="https://placehold.co/800x400.png"><img src="https://placehold.co/800x400.png"></a><div class="caption">Ea voluptatum nulla ut eveniet voluptate eos expedita omnis. Aut obcaecati voluptatum sed quia consequatur et enim porro non vero quibusdam est pariatur dolores est quia aspernatur. </div></div>
  <div class="child"><a href="https://placehold.co/500x300.png"><img src="https://placehold.co/500x300.png"></a><div class="caption">Rem libero asperiores sit tempora reiciendis qui quidem reprehenderit est ipsa delectus. Id quidem perspiciatis id repellat animi ut sunt nihil. </div></div>
 </div>

我想修改它以便能够处理更长的字幕。我也对改进 CSS 的想法持开放态度。我在这里使用 Flex 来展示画廊只是因为我无法将其与网格一起使用。因此，如果有更好的网格解决方案，我完全支持。

在保持初始合理（即按行、固定高度、自由宽度）网格布局的同时，最好的方法是什么？如果它能以其他方式按列（即砖石、固定宽度、自由高度）布局工作，那就太好了。

Answer 1

这里是简化的 CSS，它只使用了 flexbox，没有使用 gird。对于标题，将它们设置为绝对位置，以使它们脱离正常的内容流。

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.child {
  position: relative;
  flex: 1 1 auto;
  height: 200px;
}

.caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div class="gallery">
  <div class="child"><a href="https://placehold.co/600x400.png"><img src="https://placehold.co/600x400.png"></a>
    <div class="caption">Lorem ipsum dolor sit amet. Ut corrupti voluptatem non quia voluptatum ut dolorem voluptates ut dicta labore eos saepe molestiae et aperiam tempora.</div>
  </div>
  <div class="child"><a href="https://placehold.co/400x600.png"><img src="https://placehold.co/400x600.png"></a>
    <div class="caption">Qui nobis exercitationem nam quisquam excepturi qui minus necessitatibus eum veritatis minus.</div>
  </div>
  <div class="child"><a href="https://placehold.co/400x700.png"><img src="https://placehold.co/400x700.png"></a>
    <div class="caption">Est quas dolores ut odio commodi aut dolorum ipsum.</div>
  </div>
  <div class="child"><a href="https://placehold.co/500x400.png"><img src="https://placehold.co/500x400.png"></a>
    <div class="caption">Qui nihil aliquid et fuga molestias qui consectetur corrupti.</div>
  </div>
  <div class="child"><a href="https://placehold.co/900x400.png"><img src="https://placehold.co/900x400.png"></a></div>
  <div class="child"><a href="https://placehold.co/400x900.png"><img src="https://placehold.co/400x900.png"></a>
    <div class="caption">Nam internos perspiciatis et quae numquam ea doloribus nesciunt?</div>
  </div>
  <div class="child"><a href="https://placehold.co/700x400.png"><img src="https://placehold.co/700x400.png"></a>
    <div class="caption">Eos saepe soluta et nesciunt aperiam qui ducimus consectetur aut libero nesciunt ab voluptas unde qui asperiores animi.</div>
  </div>
  <div class="child"><a href="https://placehold.co/600x600.png"><img src="https://placehold.co/600x600.png"></a>
    <div class="caption">Sed dolor tempore sit pariatur earum et consequatur mollitia ad earum voluptatum ut fugiat consequatur aut eligendi voluptate. Id fugiat aliquid et porro quod et galisum rerum sed fugiat totam At voluptate temporibus.</div>
  </div>
  <div class="child"><a href="https://placehold.co/800x400.png"><img src="https://placehold.co/800x400.png"></a>
    <div class="caption">Ea voluptatum nulla ut eveniet voluptate eos expedita omnis. Aut obcaecati voluptatum sed quia consequatur et enim porro non vero quibusdam est pariatur dolores est quia aspernatur. </div>
  </div>
  <div class="child"><a href="https://placehold.co/500x300.png"><img src="https://placehold.co/500x300.png"></a>
    <div class="caption">Rem libero asperiores sit tempora reiciendis qui quidem reprehenderit est ipsa delectus. Id quidem perspiciatis id repellat animi ut sunt nihil. </div>
  </div>
</div>