如何将图像放在第 1 行的末尾和第 2 行的开头？

Question

这是我能提供的最好的预览。如果可能的话，我想用 CSS 网格布局做一些完全像这样的事情。我也希望它能够响应。这是开始代码：

.wrapper { 
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1em;
}

.background-image {
  grid-column: 1 / -1;
}

.image {
  grid-column: 2 / span 3;
}

现在我已经在很多方面尝试过 grid-template-rows 和 grid-row，但我无法让它工作。也许您可以做的第一件事就是尝试固定行，如下所示：

grid-template-rows: 200px 200px 1fr

然后

.background-image {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.image {
  grid-column: 2 / span 3;
  grid-row: 2;
}

这是一个 JSFiddle：https://jsfiddle.net/b5aujgq7/1/

但是因为我希望它在屏幕变小时响应，所以 background-image 小了很多，200px 不再有效，因为它太大了。我需要前 2 行是 fr 以便它们与图像具有相同的高度。

我想我有一个解决方案，但我不知道如何实施：将第 1 行的内容（背景图像）设为 70%。

有谁知道我如何让它工作？

Answer 1

您可以使用网格内的 CSS 定位属性保持简单：

revised fiddle demo

#main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  position: relative;
}

.background-image {
  width: 100%;
  grid-column: 1 / -1;
}

.image {
  position: absolute;
  width: 25%;
  top: 50%;
  left: 10%;

}

<section id="main">
  <img class="background-image" src="https://image.tmdb.org/t/p/w1400_and_h450_bestv2/askg3SMvhqEl4OL52YuvdtY40Yb.jpg">
  <img class="image" src="https://image.tmdb.org/t/p/w342/eKi8dIrr8voobbaGzDpe8w0PVbC.jpg">
</section>

Answer 2

为什么不只定义 4 行，将前 2 行分配给背景，将第 3 行和第 4 行分配给图像？

#main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat (4, 1fr);
  grid-column-gap: 1em;
}

.background-image {
  width: 100%;
  grid-column: 1 / -1;
  grid-row: 1 / 3;
}

.image {
  width: 100%;
  grid-column: 2 / span 3;
  grid-row: 2 / 4;
}

<section id="main">
  <img class="background-image" src="https://image.tmdb.org/t/p/w1400_and_h450_bestv2/askg3SMvhqEl4OL52YuvdtY40Yb.jpg">
  <img class="image" src="https://image.tmdb.org/t/p/w342/eKi8dIrr8voobbaGzDpe8w0PVbC.jpg">
</section>

如何将图像放在第 1 行的末尾和第 2 行的开头？

How can I put an image at the end of row 1 and start of row 2?

css

css-grid