如何在网格中放置重叠两行的图像

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列宽度相等 */
  grid-template-rows: repeat(2, 1fr); /* 两行，每行高度相等 */
  grid-gap: 10px; /* 网格间隔 */
}

<div class="grid-container">
  <img src="image1.jpg" alt="Image 1" style="grid-column: 1 / span 2; grid-row: 1;">
  <img src="image2.jpg" alt="Image 2" style="grid-column: 2 / span 2; grid-row: 2;">
</div>

<div class="grid-container">
  <img src="image1.jpg" alt="Image 1" style="grid-column: 1 / span 2; grid-row: 1; position: absolute; z-index: 2;">
  <img src="image2.jpg" alt="Image 2" style="grid-column: 2 / span 2; grid-row: 2;">
</div>