auto-fitによる折り返しが上手くいきません。

Question

CSSグリッドで写真のタイル型レイアウトを作成中です。
auto-fitを使い画面サイズに応じて写真を折り返したいのですが、
カスタマイズをして、一枚の写真だけサイズを大きくするレイアウトにすると、
上手く回り込まず、ガタガタの不揃い状態になってしまいます。
解決するにはどうすればいいでしょう？
わかる方、教えていただけると助かります。
（下にレイアウトの写真も添付しております）

-------------------html-----------------------------

</div> <div class="wrapper grid">

　　　　　<div class="item big-box">
<img src="images/menu1.jpg" alt="">
<p>写真キャプション写真キャプション</p>
</div>

      <div class="item">
    <img src="images/menu2.jpg" alt="">
          <p>写真キャプション写真キャプション</p>
    </div>

    <div class="item">
    <img src="images/menu3.jpg" alt="">
        <p>写真キャプション写真キャプション</p>
    </div>     
　　　　

</div>   <!--grid-->

-------------------CSS-------------------------------
.grid {
display: grid;
gap: 26px;
grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
margin-top: 6% ;
margin-bottom: 50px;
margin-left: 150px;
margin-right: 150px;
}

.big-box{
grid-column: 1/3;
grid-row: 1/3;
}

.big-box img{
height: 95%;
width: 100%;
object-fit: cover;
}

@media(max-width:600px){

.big-box {
    grid-column: auto;
    grid-row: auto;
}
.big-box img {
    height:100%;
}

}

---

↓　PCサイズで表示したときのレイアウト（正常に表示されます）　

↓　画面を小さくした時。（うまく回り込めず、このような表示になります。）

Answer 1

以下のようなソースコードでいかがでしょうか?

/* 追加 */
.item img {
  max-width: 100%;
  display: block;
}

/* 追加 */
@media (max-width: 1000px) {
  .grid {
    display: grid;
    gap: 26px;
    /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .big-box {
    /* こちらは、コメントアウトしなくてもいいかもしれません。両方試して、実装したい形にどちらが近いか試してください */
    /*
    grid-column: auto;
    grid-row: auto;
    */
  }
  /*
  .big-box img {
    height: 100%;
  }
  */
}