用css网格防止图像重叠

Question

我几乎完成了一个虚构的旅行社的登陆页。我决定添加图片，我的想法是在左边有一个图像，右边有一个文本，右边有第二个图像，左边有文本，第三个图像占据它下面可用空间和文本的全部宽度。

我试过使用CSS网格来实现它，但是没有，我也检查了互联网，什么也没有。我遇到的问题是，第二张和第三张图片是重叠的。我的密码在下面。HTML和CSS在下面。附注：我的意思是，我在互联网上找到的任何可能的答案都是行不通的，我的最后两张图片是重叠的，而不是我想要的模式。

 .mid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "intro intro" "pic1 title1" "title2 pic2" "pic3 pic3" "title3 title3" "pend pend";
  }

  .mid .mid-intro {
    grid-area: intro;
  }

  .mid .pic-1 {
    grid-area: pic1;
  }

  .mid .pic-1-title {
    grid-area: title1;
  }

  .mid .pic-2 {
    grid-area: pic2;
  }

  .mid .pic-2-title {
    grid-area: title2;
  }

  .mid .pic-3 {
    grid-area: pic3;
  }

  .mid .pic-3-title {
    grid-area: title3;
  }

  .mid .p-end {
    grid-area: pend;
  }



<section class="mid">
       <p class="mid-intro">Our mission is for your trip to be an enjoyable one.</p>
       
           <img src="img/img-1.jpg" alt="" class="pic-1">
           <p class="pic-1-title">Spend time with family</p>
           <img src="img/img-2.jpg" alt="" class="pic-2">
           <p class="pic-2-title">Create memories that will be remembered for ever.</p>
           <img src="img/img-3.jpg" alt="" class="pic-2">
           <p class="pic-3-title">Have fun</p>
       <p class="p-end">May the adventure begin.</p>

   </section>

Answer 1

我把p改成了div。此外，图像现在在div容器中：

​

.mid {
  display: grid;
  grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}
.mid-intro {
    grid-column: 1 / span 2;
}
.p-end {
    grid-column: 1 / span 2;
}

.mid div {
    background: red
}

<section class="mid">
            <div class="mid-intro">Our mission is for your trip to be an enjoyable one.</div>
            
           <div><img src="img/img-1.jpg" alt="img1" class="pic-1"></div>
           <div class="pic-1-title">Spend time with family</div>
           
           <div class="pic-2-title">Create memories that will be remembered for ever.</div>
           <div><img src="img/img-2.jpg" alt="img2" class="pic-2"></div>
           
           <div><img src="img/img-3.jpg" alt="img3" class="pic-2"></div>
           <div class="pic-3-title">Have fun</div>
           
            <div class="p-end">May the adventure begin.</div>

</section>

​