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

Question

这是我能提供的最佳预览。如果可能的话，我想用CSS Grid Layout做一些完全相同的事情。我也希望它能够做出回应。这是开始代码：

json.loads(serialized_object)

现在我已经在很多方面玩过.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

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

但是因为我希望它在屏幕变小时能够做出响应，所以.background-image { grid-column: 1 / -1; grid-row: 1 / 2; } .image { grid-column: 2 / span 3; grid-row: 2; } 更小，200px不再有效，因为它太多了。我需要前两行为background-image，因此它们与图像具有相同的高度。

我认为我有一个解决方案，但我不知道如何实现它：使第1行占其内容的70％（背景图像）。

有谁知道如何让这个工作？

Answer 1

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

revised fiddle demo

＆＃13;

＆＃13;

#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%;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;