gridシステムを使ってタイル型に要素(画像＋テキスト)を並べたい。

Question

前提・実現したいこと

gridシステムを使ってタイル型に要素(画像＋テキスト)を並べたい。

発生している問題・エラーメッセージ

グリッド幅に<fr>を用いて可変的な要素を作りたいが、
幅にfrを指定しているにも関わらず子要素がグリッドをはみ出てしまう。
ある程度余白をもたせたいのでmax-width使用しています。

自身の認識では幅の指定にｆｒを使用していることから
ディスプレイ幅を狭めていけばそれに伴って画像のサイズも縮小するのでは
ないかと思っていました。

認識違いのご指摘及びどうすればレイアウト崩れを解消できるか
ご教授いただければと思います。

また画像のサイズは全て620 × 460です。

該当のソースコード

【html該当箇所】-------------------------------------------

<!-- メイン部分 -->
<div class="menu_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 class="item">
    <img src="/images/menu4.jpg" alt="" />
    <p>写真キャプション写真キャプション</p>
  </div>
  <div class="item">
    <img src="/images/menu5.jpg" alt="" />
    <p>写真キャプション写真キャプション</p>
  </div>
  <div class="item">
    <img src="/images/menu6.jpg" alt="" />
    <p>写真キャプション写真キャプション</p>
  </div>
  <div class="item">
    <img src="/images/menu7.jpg" alt="" />
    <p>写真キャプション写真キャプション</p>
  </div>
  <div class="item">
    <img src="/images/menu8.jpg" alt="" />
    <p>写真キャプション写真キャプション</p>
  </div>
  <div class="item">
    <img src="/images/menu9.jpg" alt="" />
    <p>写真キャプション写真キャプション</p>
  </div>
</div>
<!-- メイン部分 -->

【css該当箇所】--------------------------------------------

.menu_grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
max-width: 1100px;
margin: 0 auto;
}

.menu_grid p {
margin: 0;
}

試したこと

画像のサイズを調整すべきかと思い、
.menu_grid img {
width: 100%;
height: 100%;
}
を加えてみました。
ディスプレイ幅を縮小・拡大させた際には希望通りの挙動になったのですが、
テキスト部分がグリッドからはみ出し他の画像と被ってしまいます。

補足情報（FW/ツールのバージョンなど）

オリジナル画像サイズ：620 × 460（全て）
max-width:1100px設定

Answer 1

こちらではいかがでしょうか。frは「余ったスペースの分割割合」を指定するものなので、縮小はしないです。

.menu_grid img {
width: 100%;
}

Comments

[sikiryogi]

早々にお答えいただきありがとうございます。
今確認したら解決しました。frについてもご説明ありがとうございます！

[Lhankor_Mhy]

お役に立てたようで何よりです。