将照片与CSS网格重叠

Question

https://codepen.io/nhn34/pen/zVQyWG

我正在尝试使用CSS Grid重叠3张照片。这是我想要的结果：

desired outcome

我尝试遵循这两种使用相同方法的教程，但是它们对我不起作用：https://www.superhi.com/video/overlapping-layouts-with-css-grid， https://www.youtube.com/watch?v=sZJrcOfBaNY

我得到的结果在CodePen中看起来像，我不知道我做错了什么地方！

这些是我的代码：

section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  div:first-child {
    grid-column: 2 / span 3;
  }
  div:nth-child(2) {
    grid-column: 1 / span 2;
  }
  div:last-child {
    grid-column: 2 / span 2;
  }
}

<section>
  <div>
    <img src="img/cancer/face1.svg" alt="face1">
  </div>
  <div>
    <img src="img/cancer/cancer.jpg" alt="cancer">
  </div>
  <div>
    <img src="img/cancer/point1.svg" alt="point1">
  </div>
</section>

Answer 1

您只错过了指定grid-row属性

grid-row: 1;

祝你好运