如何制作一个像附加图片一样的三个网格？

<div class="grid-container">
  <div class="grid-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="grid-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="grid-item">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}