レスポンシブ対応でauto指定しても画像が一列にならない。

9枚の画像(縦３×横３)の画像のうち、左上の画像のみをデスクトップ閲覧時は、大きく表示し、スマホで閲覧する場合は縦一列に表示したいのですが、スマホサイズで閲覧しようとすると、画像が縦一列に整えられない原因がわかりません。

指定したgrid-columnおよびgrid-low、imgをauto指定しているのですが、原因のご教授をいただきたく存じます。何卒よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2
3<html lang="ja">
4
5  <head>
6    <meta charset="utf-8">
7    <title>WCB Cafe - MENU</title>
8    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
9
10
11<!-- CSS -->
12    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
13
14    <link href="https://fonts.googleapis.com/css2?family=Philosopher" rel="stylesheet">
15    <link href="css/style.css" rel="stylesheet">
16    <link rel="icon" type="image/png" href="images/favicon.png">
17  </head>
18
19  <body>
20   <div id="menu" class="big-bg">
21     <header class="page-header wrapper">
22       <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
23         <nav>
24           <ul class="main-nav">
25               <li><a href="news.html">News</a></li>
26               <li><a href="menu.html">Menu</a></li>
27               <li><a href="contact.html">Contact</a></li>
28           </ul>
29         </nav>
30     </header> <!--page-header-->
31
32       <div class="menu-content wrapper">
33           <h2 class="page-title">Menu</h2>
34           <p>身体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です
35              おいしいブレンドコーヒーとヘルシーなオーガニックフードで身体の内側から癒されてください。
36           </p>
37       </div><!--menu-content--->
38
39    </div><!--/#menu-->
40
41    <div class="wrapper grid">
42         <div class="item big-box">
43             <img src="images/menu1.jpg" alt="">
44             <p>写真キャプション写真キャプション</p>
45         </div>
46         <div class="item">
47             <img src="images/menu2.jpg" alt="">
48             <p>写真キャプション写真キャプション</p>
49         </div>
50         <div class="item">
51             <img src="images/menu3.jpg" alt="">
52             <p>写真キャプション写真キャプション</p>
53         </div>
54         <div class="item">
55             <img src="images/menu4.jpg" alt="">
56             <p>写真キャプション写真キャプション</p>
57         </div>
58         <div class="item">
59             <img src="images/menu5.jpg" alt="">
60             <p>写真キャプション写真キャプション</p>
61         </div>
62         <div class="item">
63             <img src="images/menu6.jpg" alt="">
64             <p>写真キャプション写真キャプション</p>
65         </div>
66         <div class="item">
67             <img src="images/menu7.jpg" alt="">
68             <p>写真キャプション写真キャプション</p>
69         </div>
70         <div class="item">
71             <img src="images/menu8.jpg" alt="">
72             <p>写真キャプション写真キャプション</p>
73         </div>
74         <div class="item">
75             <img src="images/menu9.jpg" alt="">
76             <p>写真キャプション写真キャプション</p>
77         </div>
78
79    </div><!--.grid-->
80
81<!-- フッター -->
82   <footer>
83       <div class="wrapper">
84            <p><small>&copy; 2019 Manabox</small></p>
85       </div>
86   </footer>
87
88  </body>
89</html>
90

CSS
1@charset "UTF-8";
2/* 共通部分
3----------------------------------------*/
4html {
5  font-size: 100%
6}
7
8body {
9
10  font-family: "Yu Gothic" , "游ゴシック Medium" , YuGothic , "游ゴシック体" , "ヒラギノ角ゴ Pro W3" , sans-serif;
11  line-height: 1.7;
12  color: #432;
13}
14a {
15  text-decoration: none;
16}
17img {
18  max-width: 100%;
19}
20
21 /*  HEADER
22  --------------------------------------------*/
23.logo {
24  width: 210px;
25  margin-top: 14px;
26}
27
28.main-nav {
29  display: flex;
30  font-size: 1.25rem;
31  text-transform: uppercase;
32  margin-top: 34px;
33  list-style: none;
34}
35
36.main-nav li {
37  margin-left: 36px;
38}
39
40.main-nav a {
41  color: #432;
42}
43
44.main-nav a:hover {
45  color: #0bd;
46}
47
48.page-header {
49  display: flex;
50  justify-content: space-between;
51}
52
53.wrapper {
54  max-width: 1100px;
55  margin: 0 auto;
56  padding: 0 4%;
57}
58
59/* HOME */
60.home-content {
61  text-align: center;
62  margin-top: 10%;
63}
64
65.home-content p {
66  font-size: 1.125rem;
67  margin: 10px 0 42px;
68}
69
70/* 見出し */
71.page-title {
72  font-size: 5rem;
73  font-family: 'Philosopher' , serif;
74  text-transform: uppercase;
75  font-weight: normal;
76}
77
78/* ボタン */
79.button {
80  font-size: 1.375rem;
81  background: #0bd;
82  color: #fff;
83  border-radius: 5px;
84  padding: 18px 32px;
85}
86
87.button:hover {
88  background: #0090aa;
89}
90
91/* 大きな背景画像 */
92.big-bg {
93  background-size: cover;
94  background-position: center top;
95}
96
97#home {
98  background-image: url(../images/main-bg.jpg);
99  min-height: 100vh;
100}
101
102#home .page-title {
103  text-transform: none;
104}
105
106/* NEWS */
107#news {
108  background-image: url(../images/news-bg.jpg);
109  height: 270px;
110  margin-bottom: 40px;
111}
112
113#news .page-title {
114  text-align: center;
115  }
116
117  /* フッター */
118footer {
119  background: #432;
120  text-align: center;
121  padding: 26px 0;
122}
123
124footer p {
125  color: #fff;
126  font-size: 0.875rem;
127}
128
129/* 記事部分 */
130article {
131  width: 74%;
132}
133
134/* サイドバー部分 */
135  aside {
136    width: 22%;
137  }
138
139.news-contents {
140  display: flex;
141  justify-content: space-between;
142  margin-bottom: 50px;
143}
144
145.post-info {
146  position: relative;
147  padding-top: 4px;
148  margin-bottom: 40px;
149}
150
151.post-date {
152  background: #0bd;
153  border-radius: 50%;
154  color: #fff;
155  width: 100px;
156  height: 100px;
157  font-size: 1.625rem;
158  text-align: center;
159  position: absolute;
160  top: 0;
161  padding-top: 10px;
162}
163
164.post-date span {
165  font-size: 1rem;
166  border-top: 1px rgba(255, 255, 255, .5) solid;
167  padding-top: 6px;
168  display: block;
169  width: 60%;
170  margin: 0 auto;
171}
172
173.post-title {
174  font-family: "Yu Mincho" , "YuMincho" , serif;
175  font-size: 1.9rem;
176  font-weight: normal;
177}
178
179.post-title,
180.post-cat {
181 margin-left: 120px;
182}
183
184article img {
185  margin-bottom: 20px;
186}
187
188article p {
189  margin-bottom: 1rem;
190}
191
192.sub-title {
193  font-size: 1.375rem;
194  padding: 0 8px 8px;
195  border-bottom: 2px #0bd solid;
196  font-weight: normal;
197}
198
199aside p {
200  padding: 12px 10px;
201}
202
203.sub-menu {
204  margin-bottom: 60px;
205  list-style: none;
206}
207
208.sub-menu li {
209  border-bottom: 1px #ddd solid;
210}
211
212.sub-menu a {
213  color: #432;
214  padding: 10px;
215  display: block;
216}
217
218.sub-menu a:hover {
219  color: #0bd;
220}
221
222/* スマホ対応
223------------------------------------------------------------*/
224@media screen and (max-width:600px) {
225  .page-title {
226    font-size: 2.5rem;
227  }
228
229  .page-header {
230    flex-direction: column;
231    align-items: center;
232  }
233
234  /* NEWS */
235  .news-contents {
236    flex-direction: column;
237  }
238
239  article,
240  aside {
241    width: 100%;
242  }
243
244/* HEADER */
245.main-nav {
246  font-size: 1rem;
247  margin-top: 10px;
248}
249
250 .main-nav li {
251   margin: 0 20px;
252 }
253
254 /* HOME */
255.home-content {
256  margin-top: 20%;
257}
258
259#news .page-title {
260  margin-top: 30px;
261}
262
263aside {
264  margin-top: 60px;
265}
266
267.post-info {
268  margin-bottom: 30px;
269}
270
271.post-date {
272  width: 70px;
273  height: 70px;
274  font-size: 1rem;
275}
276
277.post-date span {
278  font-size: 0.875rem;
279  padding-top: 2px;
280}
281
282.post-title {
283  font-size: 1.375rem;
284}
285
286.post-cat {
287  font-size: 0.875rem;
288  margin-top: 10px;
289}
290
291.post-title,
292.post-cat {
293  margin-left:  80px;
294}
295
296article {
297  width: 60%;
298  order: 2;
299}
300
301aside {
302  width: 22%;
303  order: 3;
304}
305
306.ad {
307  order: 1;
308}
309
310/* スマホ MENU */
311.menu-content {
312  margin-top: 20%;
313}
314
315.big-box {
316  grid-column: auto;
317  grid-row: auto;
318}
319.big-box img {
320  height: auto;
321}
322}
323/* MENU
324------------------------------------------------------*/
325#menu {
326  background-image: url(../images/menu-bg.jpg);
327  min-height: 100vh;
328}
329
330.menu-content {
331  max-width: 560px;
332  margin-top: 10%;
333}
334
335.menu-content .page-title {
336  text-align: center;
337}
338
339.menu-content p {
340  font-size: 1.125rem;
341  margin: 10px 0 0;
342}
343
344.grid {
345  display: grid;
346  gap: 26px;
347  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
348  margin-top: 6%;
349  margin-bottom: 50px;
350}
351
352.big-box {
353  grid-column: 1 / 3;
354  grid-row: 1 / 3;
355}
356
357
358.big-box img {
359  height: 94%;
360  width: 100%;
361  object-fit: cover;
362}
363