レスポンシブに対応しない　grid使用

前提・実現したいこと

練習用にタイル型のレイアウトを模写してます。（HTML CSS)

gridを使用してレイアウトをカスタマイズしてますが
レスポンシブに対応させようとCSSを書いた部分が反映しません。

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

CSS
@media (max-width: 600px) {
.big-box {
            grid-column: auto;
            grid-row: auto;
        }
    .big-box img {
            height: 100%;
        }この部分が適用されず

表示サイズが６００ｐｘ以下でも
.big-box{
  grid-column: 1/3;
  grid-row: 1/3;
}
.big-box img{
  height: 94%;
  width: 100%;
  object-fit: cover;
}
この部分が適用されてしまってます。

該当のソースコード

HTML
   <body>
 
   <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><!-- /.grid -->

</body>

CSS
@chaset"UTF-8";
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

.wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

/*モバイル版-----------*/
@media (max-width: 600px) {
    
    .big-box {
            grid-column: auto;
            grid-row: auto;
        }
    .big-box img {
            height: 100%;
        }
}


.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;
}

試したこと

@media部分のCSSは問題なく反映している。
ディベロッパーツールで確認したところレスポンシブで書いている部分に車線が入っており、元のCSSが反映している（表現が下手すぎてすみません。。）

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

ここにより詳細な情報を記載してください。

kei344

2020/06/08 12:54

「元のCSS」も質問文に追記されることをお勧めします。

Ryooooooooooooo

2020/06/08 13:03

指摘ありがとうございます。質問が非常にわかりずらくなってしまっていて申し訳ございません。いろいろ試したのですがどうしても解決できず初めて質問させて頂きました。

kei344

2020/06/08 13:37

https://jsfiddle.net/enptqwgs/ 提示された状況が再現しません（レスポンシブで書いている部分に車線）。CSSはそれだけでしょうか。また、@mediaブロックが閉じていませんが、それも元コードのままでしょうか。

Ryooooooooooooo

2020/06/08 13:54

申し訳ございません。CSSに記載している部分　提示しなおしました。＠mediaは閉じてます。

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

回答1件

ベストアンサー

@mediaは後に書きましょう。CSSは後から書いた指定が優先されます。

CSS
1.grid{
2  display: grid;
3  gap: 26px;
4  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
5  margin-top: 6%;
6  margin-bottom: 50px;
7}
8.big-box{
9  grid-column: 1/3;
10  grid-row: 1/3;
11}
12.big-box img{
13  height: 94%;
14  width: 100%;
15  object-fit: cover;
16}
17
18/*モバイル版-----------*/
19@media (max-width: 600px) {
20
21    .big-box {
22            grid-column: auto;
23            grid-row: auto;
24        }
25    .big-box img {
26            height: 100%;
27        }
28}