タイル型レイアウトの（CSS）レスポンシブが適応されません。

HTML&CSSを勉強している初心者なのですが、書籍を見ながらコードを書いていてレスポンシブ部分でどうしても詰まってしまったので、アドバイスいただけないかと思い質問しました。

タイル型の画像をひき詰めたレイアウトを作成していて、デスクトップサイズでは上手く表示されるのですが、スマートフォンサイズ（レスポンシブ）で確認すると画像が↓（画像１）のように小さくなってしまいます。本来であれば、（画像２）のように小さくなることが無く、サイズが揃って表示されるみたいなのですが、何度見直しても上手くいきませんでした。

書籍では @media内でgrid-column: auto; 　grid-row: auto;で範囲を解消しheightも100%に指定し、元に戻すとあるのですが、この記述をしてもスマートフォンサイズでは歪んでしまいます。

初心者の質問で大変申し訳ないのですが、下のほうにコードも併せて載せていますので、どなたか助けていただければ幸いです。

（画像１）

（画像２）

コード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Wcb Cafe - MENU</title>
    <meta name="description" content="ブレンドコーヒーとヘルシーーなオーガニックフードを提供するカフェ">


    <!-- css -->
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link href="https://fonts.googleapis.com/css?family=Philosopher&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/png" href="images/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="menu" class="big-bg">
      <header class="page-header wrapper" >
      <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェ ホーム"></a></h1>
        <nav>
          <ul class="main-nav">
            <li><a href="news.html">News</li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <div class="menu-content wrapper">
        <h2 class="page-title">Menu</h2>
        <p>
          体に優しい自然食を提供する。WCB CAFE。無添加の食材を利用したメニューが特徴です。おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。
        </p>

      </div>
</div><!--/.home-content-->

  <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 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>


  <footer>
    <div class="wrapper">
      <p><small>&copy; 2019 Manabox</small></p>

    </div>
  </footer>

  </body>
</html>

コード
@charset "UTF-8";

/* 共通部分 ---*/
html {
  font-size: 100%;
}
body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium",    Yu Gothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
 line-height: 1.7;
  color: #432;
}
a {
  text-decoration: none;

}
img {
  max-width: 100%;
}

/* header-----*/
.logo {
  width: 210px;
  margin-top: 14px;
}
.main-nav {
  display: flex;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-top:  34px;
  list-style: none;
}
.main-nav li{
  margin-left: 36px;
}
.main-nav a{
  color:  #432;
}
.main-nav a:hover{
  color: #0bd;
}
.page-header {
  display: flex;
  justify-content: space-between;
}
.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}
.home-content {
  text-align: center;
  margin-top: 10%;
}
.home-content p{
  font-size: 1.125rem;
  margin: 10px 0 42px;
}
/*見出し*/
.page-title {
  font-size: 5rem;
  font-family: 'Philosopher', serif;
  text-transform: uppercase;
  font-weight: normal;
}
/*ボタン*/
.button {
  font-size: 1.375rem;
  background: #0bd;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
}
.button:hover {
  background: #0090aa;
}
.big-bg {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
#home {
 background-image: url(../images/main-bg.jpg);
  min-height: 100vh;
}
#home .page-tile {

  text-transform: none;
}
/*NEWS
---------------------------------------------*/
#news {
  background-image: url(../images/news-bg.jpg);
  height: 270px;
  margin-bottom:  40px;
  }
  #news .page-title {
    text-align: center;
  }
  /*フッター-------------------------*/
  footer {
    background: #432;
    text-align: center;
    padding: 26px 0;
  }
 footer p {
   color:  #fff;
   font-size: 0.875rem;
 }
/*記事部分*/
article {
  width: 60%;
  order: 2;
}
aside {
  width: 22%;
  order: 3;
}
.ad {
  order: 1;
}
.news-contents {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
.post-info {
  position: relative;
  padding-top: 4px;
  margin-bottom: 40px;
}
.post-date {
  background: #0bd;
  border-radius: 50%;
  color: #fff;
  width:  100px;
  font-size:  1.625rem;
  text-align:  center;
  position: absolute;
  top: 0;
  padding-top: 10px;
}
.post-date span {
  font-size: 1rem;
  border-top:  1px rgba(255,255,255,.5) solid;
  padding-top:  6px;
  display: block;
  width:  60%;
  margin:  0 auto;
}
.post-title {
  font-family: "Yu Mincho", serif;
  font-size:  2rem;
  font-weight: normal;
  margin-left: 120px;
  }
  .post-cat {
    margin-left: 120px;
  }
article img {
  margin-bottom: 20px;
}
article p {
  margin-bottom:  1rem;
}
.sub-title {
  font-size: 1.375rem;
  padding: 0 8px 8px;
  border-bottom: 2px #0bd solid;
  font-weight:  normal;
}
aside p {
 padding: 12px 10px;
}
.sub-menu {
  margin-bottom: 60px;
  list-style: none;
}
.sub-menu li {
  border-bottom: 1px #ddd solid;
}
.sub-menu a {
  color: #432;
  padding: 10px;
  display: block;
}
.sub-menu a:hover {
  color: #0bd;
}
/*モバイル版-------------------*/
@media (max-width: 600px) {

  .page-title {
    font-size: 2.5rem;
  }
  /*header*/
  .main-nav {
    font-size: 1rem;
    margin-top: 10px;
  }
  .main-nav li {
    margin: 0 20px;
  }
  /*home*/
  .home-content {
    margin-top:  20%;
  }
  .page-header {
    flex-direction: column;
      align-items: center;
}

/*news*/
.news-contents {
  flex-direction: column;
}
article {
  width: 100%;
}
aside {
  width: 100%;
}
#news .page-tite {
  margin-top: 30px;
}
aside {
  margin-top: 60px;
}
.post-info {
  margin-bottom: 30px;
}
.post-date {
  width: 70px;
  height: 70px;
  font-size: 1rem;
}
.post-date span {
  font-size: 0.875rem;
  padding-top: 2px;
  }
  .post-title {
    font-size: 1.375rem;
  }
  .post-cat {
    font-size: 0.875rem;
    margin-top: 10px;
  }
  .post-title, .post-cat {
    margin-left: 80px;
  }
  /*MENU*/
  .menu-content {
    margin: 20%;
  }
  .big-box {
    grid-column: auto;
    grid-row: auto;
  }
  .big-box {
    height: 100%;
  }
  .ad img {
    display: none;
  }
}
/*MENU------------------------------------*/
#menu {
  background-image: url(../images/menu-bg.jpg);
  min-height: 100vh;
}
.menu-content {
  max-width: 560px;
  margin-top: 10%;
}
.menu-content .page-title {
  text-align: center;
}
.menu-content p {
  font-size: 1.125rem;
  margin: 10px 0 0;
  }
.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 6%;
  margin-bottom: 50px;
}
.big-box {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.big-box img {
  height: 94%;
  width: 100%;
  object-fit: cover;
}

kei344

2020/02/23 12:22

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

tosamaru

2020/02/23 13:12

申し訳ありません。汗　実はまだ、解決していなく解決済みにしていませんでした。 imgを追加したのですが、どうしてもレスポンシブに反映されず、htmlでbig-boxとタグ付けし、一番上の（コーヒーの画像）のみ大きくした場合、メディアクエリでgrid-column: auto; grid-row: auto;と指定すれば、レスポンシブで解消され同じおおきに表示されるとあるのですが、どうやってもそのようにならないんです。 grid-columnとgrid-rowをレスポンシブにて解消するにはどのように記述すればいいのでしょうか？お返事いただければ幸いです。

kei344

2020/02/23 13:22

ここは「質問への追記・修正の依頼」ですので、「回答」ではありません。質問本文は編集することが可能なので、その依頼をしています。また、回答されている方もおられるので、回答内容を再度確認して不明な点をコメントしてみてはいかがでしょう。

tosamaru

2020/02/23 13:59

丁寧にありがとうございます！まだ、使い方が慣れていなく申し訳ありません。回答いただいた方にもう一度、質問してみたいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

【ダウンロード】1冊ですべて身につくHTML & CSSとWebデザイン入門講座｜SBクリエイティブ

↑ここからダウンロードして比べてみてみましたが、c6-06-1のCSSと比べると、以下の部分が違いました。

↓ご提示のコード

css
1/*モバイル版-------------------*/
2@media (max-width: 600px) {
3
4  /*MENU*/
5  .menu-content {
6    margin: 20%;
7  }
8  .big-box {
9    grid-column: auto;
10    grid-row: auto;
11  }
12  .big-box {
13    height: 100%;
14  }
15}

↓ダウンロードしたコード

css
1/* モバイル版
2------------------------------- */
3@media (max-width: 600px) {
4    /* MENU */
5    .menu-content {
6        margin-top: 20%;
7    }
8    .big-box {
9        grid-column: auto;
10        grid-row: auto;
11    }
12    .big-box img { // ←ここ
13        height: 100%;
14    }
15}

投稿2020/02/21 01:17

Lhankor_Mhy

総合スコア36089

tosamaru

2020/02/21 02:26

回答いただき、本当にありがとうございます！ imgを記述していなかったんですね。汗本当に助かります(＞人＜;) 帰ったら、記述し直してみたいと思います！ありがとうございます！

tosamaru

2020/02/23 14:05

夜分にすいません。一度回答いただいていたのですが、まだ問題が解決していなく再度ご連絡させていただきました。 img　を記述し直してみたのですが、やはり画像が歪んでしまいgrid-columnとgrid-rowが解消されません。grid-columnとgrid-rowをレスポンシブにて解消するにはどのように記述すればよろしいでしょうか？お忙しい中申し訳ございません。お時間ある時にご回答いただければ幸いです。

Lhankor_Mhy

2020/02/25 01:59

私が拝見した限り、ルールの順番が変わっています。 CSSは後から書いたルールが優先されるので、順番を変えると結果も変わります。厳しいことを書きますが、tosamaruさんはCSSデザインの勉強をしているのですよね？なぜ自分でやらないのですか？こんなの、実際に比べてみれば、一目でわかる違いでしょう？それとも、CSSが後書き優先であることを知らなかったのですか？

tosamaru

2020/02/27 14:27

返信遅れまして、大変申し訳ございません。お返事に気づかず、遅れてしまいました。申し訳ございません。確認していただき、本当にありがとうございます。はい。今必死に勉強しているのですが、なかなか理解できず再度質問してしましました。 CSSが後書き優先ということは初めて知りました！初心者の質問にお答えいただき本当に感謝しています。勉強になります。厳しいお言葉も受け止めしっかり勉強していきたいと思います。ありがとうございました！

行動規範の内容に同意します