[HTML/CSS] タイル型に並べるdisplay: grid; で、要素を画面幅に合わせて自動で伸縮させたい。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

画面幅に合わせて要素繰り返される「auto-fit」を効かせたい。

前提

HTML・CSS・Jquery を使用して、コラムページを作成しています。
display: grid; を使って、画像とテキストをタイル型に並べようとしています。
Jqueryで下からふわっとフェードインする動き、カーソルを画像上に乗せたときに、拡大される動きも実装させています。また、ページネーションをつけて、9つごとにページを変えています。

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

レスポンシブ対応を@media で指定しなくても自動で幅や行が動くはずが、幅を縮めても、何も変わらず画面からはみ出てしまいます。
gridと同じclassに、Jqueryを実装させるclassも指定してることが原因なのか？と考えています。

該当のソースコード

HTML

1<main> 2 <div class="grid list-group"> 3 <a href="article1.html"> 4 <div class="article"> 5 <div class="article-img"> 6 <img src="images/bike.jpg" alt="改装後エントランス"> 7 </div> 8 <p class="category">リノベ</p> 9 <p class="date">2023.11.07</p> 10 <p class="title">#1 趣味が楽しめるインダストリアルなお家へフルリノベ！</p> 11 </div> 12 </a> 13 14 上記の<a>から</a>を何度も繰り返し・・・ 15　　　</div> 16 </main>

jQuery(HTML内に実装)

1<script type="text/javascript"> 2 jQuery(document).ready(function($){ 3 $('.list-group').paginathing({ 4 perPage: 9, 5 firstLast: false, 6 prevText:'前へ' , 7 nextText:'次へ' , 8 activeClass: 'active', 9 }) 10 11 $(window).scroll(function () { 12 const windowHeight = $(window).height(); 13 const scroll = $(window).scrollTop(); 14 15 $('.article').each(function () { 16 const targetPosition = $(this).offset().top; 17 if (scroll > targetPosition - windowHeight + 100) { 18 $(this).addClass("is-fadein"); 19 } 20 }); 21 }); 22 }); 23 </script>

CSS

1 /* メイン */2 .grid {3 display: grid;4 place-items: center;5 gap: 50px;6 grid-template-columns: 1fr 1fr 1fr;　(←repeat関数も効かないため、 7　　　　　　　　　　　　　　　　　　　　　　　　このように指定しています。)8 margin: 10% 150px;9 }10 a {11 color: inherit;12 }13 a:hover {14 opacity: 0.7;15 }16 .article img {17 border-radius: 30px;18 }19 .category {20 display: inline;21 border: solid 1px #404040;22 border-radius: 15px;23 padding: 2px 7px 1px;24}25 .date {26 display: inline-block;27 vertical-align: bottom;28 font-size: 0.8rem;29}30/* 画像拡大 */31.article-img {32 cursor: pointer;33 max-width: 500px;34 overflow: hidden;35 width: 320px; 36 height: 200px;37 border-radius: 30px;38 margin-bottom: 10px;39 }40 .article-img img {41 transition: transform .6s ease; /* ゆっくり変化させる */42 border-radius: 30px;43 }44 .article-img:hover img {45 transform: scale(1.1); /* 拡大 */46 border-radius: 30px;47 }48 49 /* スクロール時、下からふわっと */50 .article {51 /* 最初は非表示 */52 opacity: 0;53 visibility: hidden;54 transform: translateY(80px);55 transition: opacity 1s, visibility 1s, transform 1s;56 }57 /* フェードイン時に入るクラス */58 .is-fadein {59 opacity: 1;60 visibility: visible;61 transform: translateX(0);62 }63 64/* ページネーション */65.pagination{66 list-style: none;67 display: flex;68 justify-content: center;69 padding: 5px;70 margin-bottom: 50px;71}72.pagination li{73 margin: 5px;74 border: 1.3px solid #404040;75}76.pagination a{77 display: block;78 text-decoration: none;79 color: #404040;80 padding: 5px 12px;81 font-size: 14px;82}83.pagination a:hover{84 background-color: #404040;85 color: #fff;86}87.active{88 background-color: rgba(250, 236, 206, 0.637);89}

試したこと

の順番を逆にして試したが、何も変わらなかった。

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

会社のホームページを作成しているため、何か回答頂けますと幸いです。
宜しくお願い致します。