使用 CSS 网格重叠照片答案

【问题标题】：Overlapping Photos with CSS Grid使用 CSS 网格重叠照片
【发布时间】：2019-11-23 17:35:00
【问题描述】：

我正在尝试使用 CSS Grid 重叠 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>

【问题讨论】：

对于初学者来说，您的笔设置为 CSS，但样式以 SCSS 格式编写。通过单击 CSS 窗格左上角的小齿轮图标来更改预处理器设置。

标签： html css css-grid photo

【解决方案1】：

您只是错过了指定网格行属性

grid-row: 1;

祝你好运

【讨论】：