cssのグリッドが崩れてしまい、解決方法が知りたいです。7

Question

実現したいこと

3枚の画像を添付のように並べ、それぞれにリンクを貼り、レスポンシブ対応させたく考えております。

発生している問題・分からないこと

スマホの端末によって添付画像のように拡大して表示されてしまいます。
何卒誤った部分のご指摘をお願い致します。

該当のソースコード

  <div class="layout mt30">
    <div class="left"> <a href="#"> <img src="/image/a.webp" alt=""></a> </div>
    <div class="right-top"> <a href="#"><img src="/image/b.webp" alt=""></a> </div>
    <div class="right-bottom"> <a href="#"> <img src="/image/c.webp" alt=""></a> </div>
  </div>

/* Grid */
.layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: 5px;
  width: 100%;
margin: 0 auto 50px auto;

}
.left {
  grid-row: 1 / 3; /* 2行使う */
}
.layout img {
  height: 100%;
  object-fit: cover;
}




@media (max-width: 768px) {
    /* Grid */
.layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: 5px;
  width: 100%;
margin: 0 auto 60px auto;
}
.left {
  grid-row: 1 / 3; /* 2行使う */
}
.layout img {
  height: 100%;
  object-fit: cover;
}
    
    
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

teratailで検索、
google検索の後、ソースコード変更等行いましたが変化が起こりませんでした。

補足

特になし

Comments

[Lhankor_Mhy]

ご提示のコードですと`img`の`width`が指定されていないようですので、グリッドの横幅に対してはみ出したり不足したりしませんか？
つまり、ご提示のコードだけだと、スクリーンショットのようにならないように思います。提示いただいていないコードがありませんか？

[kimu05]

Lhankor_Mhy様
いつもご確認いただきありがとうございます。
お恥ずかしい限りです。
layoutで囲っている部分のcssは提示しております分ですべてになります。

[Lhankor_Mhy]

他の部分のために書いたCSSが影響している、ということはありませんか？

念のため、ご提示のコードだけのサンプルを提示します（画像はプレースホルダを入れています）。
https://jsfiddle.net/Lhankor_Mhy/y72f5sck/

[kimu05]

Lhankor_Mhy様
お忙しい中ありがとうございます。
取り急ぎwidthをimgに反映したところ解決することができました。
いつもありがとうございます。

Answer 1

Lhankor_Mhy様にご指摘いただいた、
widthを100％にしたところ解決できました。
ありがとうございました。