.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 4px;
    width: 100%;         /* 親要素に合わせる */
    max-width: 900px;   /* 最大幅を設定できる */
    margin: 0 auto;      /* 中央に配置 */
}
.parent > div {
    padding:10px;
    display: grid;
    place-items: center;
    background: #fff;
}
.parent > div > a {
    text-align: center;
}
@media (max-width: 670px) {
  .parent {
    grid-template-columns: 1fr;
  }
  .parent > div {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

.div3 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-row-start: 3;
    padding: 0;          /* ← 親の余白を消す */
  display: block;      /* ← grid/center寄せを解除 */
  background: none;    /* 背景色も不要なら外す */
}
.div3 .slideshow {
  width: 100%;   /* div3いっぱいに広げる */
  height: 100%;  /* div3の高さも目一杯 */
}
.div3 .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 縦横比を崩さず埋める */
}

.div4 {
    grid-column-start: 3;
    grid-row-start: 3;
}

.div5 {
    grid-column-start: 3;
    grid-row-start: 4;
}

.div6 {
    grid-row-start: 5;
}

.div7 {
    grid-row-start: 5;
}

.div8 {
    grid-row-start: 5;
}

.div9 {
    grid-row-start: 6;
}

.div10 {
    grid-row-start: 6;
}

.div11 {
    grid-row-start: 6;
}