CSS网格第二列子的高度基于没有js的第一列高度答案

【问题标题】：CSS grid second column childs height based on first column height without jsCSS网格第二列子的高度基于没有js的第一列高度
【发布时间】：2022-01-14 00:36:57
【问题描述】：

我想做一些像拼贴这样的东西，我有 3 张图片。第一个在左侧大，另外两个较小，放在右侧一个在另一个之上。 主要特点是第一张图片可以有不同的高度

我使用了 css 网格，但我不知道如何使第二列中的行（或内容）高度基于第一列，其中我有 2 行高度的元素。

为了更好地理解https://jsfiddle.net/x0jd2Lcf/，我创建了一个小提琴，但结果不是我想要的：

.container {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, min-content);
}

.container img:nth-child(1) {
  grid-row: span 2;
}

<div class="container">
  <img src="https://via.placeholder.com/246x354" />
  <img src="https://via.placeholder.com/164x236" />
  <img src="https://via.placeholder.com/164x236" />
</div>

编辑：第一张图片（大，在左栏中）不应改变其大小

【问题讨论】：

不要认为你可以用你当前的结构做到这一点。如果您将第二张/第三张图片包装在一个单独的元素中，您可能会 - stackoverflow.com/questions/34194042/…

标签： html css css-grid

【解决方案1】：

如果您将每个img 元素包装在一个容器中，您可以使用object-fit 来填充容器的整个空间，而不会扭曲您的图像。

.container {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, min-content);
}

.container div:nth-child(1) {
  grid-row: span 2;
}

img{
  object-fit: contain;
  height: 100%;
}

<div class="container">
  <div class="img_container">
  <img src="http://sfwallpaper.com/images/random-image-14.jpg" />
  </div>
  <div class="img_container">
  <img src="https://media.istockphoto.com/photos/random-multicolored-spheres-computer-generated-abstract-form-of-large-picture-id1295274245?b=1&k=20&m=1295274245&s=170667a&w=0&h=4t-XT7aI_o42rGO207GPGAt9fayT6D-2kw9INeMYOgo=" />
  </div>
  <div class="img_container">
  <img src="https://media.istockphoto.com/photos/random-multicolored-spheres-computer-generated-abstract-form-of-large-picture-id1295274245?b=1&k=20&m=1295274245&s=170667a&w=0&h=4t-XT7aI_o42rGO207GPGAt9fayT6D-2kw9INeMYOgo=" />
  </div>
</div>

【讨论】：