使用 CSS 网格重叠照片

Question

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

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

期望的结果

我

尝试遵循这些教程，它们都使用相同的方法，但它们对我不起作用：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: 1;

祝你好运