如何在Foundation中构建照片的嵌套网格？

<div class="grid-container">
  <div class="grid-item">
    <img src="photo1.jpg" alt="Photo 1">
  </div>
  <div class="grid-item">
    <img src="photo2.jpg" alt="Photo 2">
  </div>
  <div class="grid-item">
    <img src="photo3.jpg" alt="Photo 3">
  </div>
  <div class="grid-item">
    <img src="photo4.jpg" alt="Photo 4">
  </div>
  <div class="grid-item">
    <img src="photo5.jpg" alt="Photo 5">
  </div>
  <div class="grid-item">
    <img src="photo6.jpg" alt="Photo 6">
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
  grid-gap: 10px; /* 网格间距 */
}

.grid-item {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* 1:1宽高比 */
  position: relative;
}

.grid-item img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充 */
}