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

Question

実現したいこと

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

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

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

前提

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

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

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

該当のソースコード

<main>
      <div class="grid list-group">
            <a href="article1.html">
                <div class="article">
                    <div class="article-img">
                        <img src="images/bike.jpg" alt="改装後エントランス">
                    </div>
                    <p class="category">リノベ</p>
                    <p class="date">2023.11.07</p>
                    <p class="title">#1 趣味が楽しめるインダストリアルなお家へフルリノベ！</p>
                </div>
            </a>

            上記の<a>から</a>を何度も繰り返し・・・
　　　</div>
 </main>

<script type="text/javascript">
        jQuery(document).ready(function($){
            $('.list-group').paginathing({
                perPage: 9,
                firstLast: false,
                prevText:'前へ' ,
                nextText:'次へ' ,
                activeClass: 'active',
            })

            $(window).scroll(function () {
            const windowHeight = $(window).height();
            const scroll = $(window).scrollTop();
                
            $('.article').each(function () {
            const targetPosition = $(this).offset().top;
            if (scroll > targetPosition - windowHeight + 100) {
              $(this).addClass("is-fadein");
            }
            });
            });
        });
    </script>

 /* メイン */
 .grid {
    display: grid;
    place-items: center;
    gap: 50px;
    grid-template-columns: 1fr 1fr 1fr;　(←repeat関数も効かないため、
　　　　　　　　　　　　　　　　　　　　　　　　このように指定しています。)
    margin: 10% 150px;
 }
 a {
    color: inherit;
 }
 a:hover {
    opacity: 0.7;
 }
 .article img {
    border-radius: 30px;
 }
 .category {
    display: inline;
    border: solid 1px #404040;
    border-radius: 15px;
    padding: 2px 7px 1px;
}
 .date {
    display: inline-block;
    vertical-align: bottom;
    font-size: 0.8rem;
}
/* 画像拡大 */
.article-img {
    cursor: pointer;
    max-width: 500px;
    overflow: hidden;
    width: 320px; 
    height: 200px;
    border-radius: 30px;
    margin-bottom: 10px;
  }
  .article-img img {
    transition: transform .6s ease; /* ゆっくり変化させる */
    border-radius: 30px;
  }
  .article-img:hover img {
    transform: scale(1.1); /* 拡大 */
    border-radius: 30px;
  }

 /* スクロール時、下からふわっと */
 .article {
    /* 最初は非表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 1s, visibility 1s, transform 1s;
  }
  /* フェードイン時に入るクラス */
  .is-fadein {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

/* ページネーション */
.pagination{
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 5px;
    margin-bottom: 50px;
}
.pagination li{
    margin: 5px;
    border: 1.3px solid #404040;
}
.pagination a{
    display: block;
    text-decoration: none;
    color: #404040;
    padding: 5px 12px;
    font-size: 14px;
}
.pagination a:hover{
    background-color: #404040;
    color: #fff;
}
.active{
    background-color: rgba(250, 236, 206, 0.637);
}

試したこと

<div class="grid>の直下に<a>タグを置くのが良くないと目にし、 <a href="article1.html"> <div class="article"> の順番を逆にして試したが、何も変わらなかった。

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

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

Comments

[Lhankor_Mhy]

paginathing というメソッドは、標準的な jQuery には存在しないと思うのですが、なにかライブラリを使っていませんか？

[minaaa1223]

paginathing.min.jsというファイルを、GitHubからダウンロードし、実装させております...!

Answer 1

.article-imgがwidth: 320px;で、.gridがgap: 50px; grid-template-columns: 1fr 1fr 1fr;ですから、最低限 320+50+320+50+320=1060px が必要になります。それ以下のビューポートの場合、はみ出るのは仕方がないと思います。

レイアウトを見直してはどうでしょうか。

なお、「repeat関数も効かない」という問題は再現しませんでしたので、そちらの問題を解決する必要がある場合は、問題が再現するコードをご提示ください。

Comments

[minaaa1223]

回答ありがとうございます。レイアウトを見直し、width: auto;にし、marginの指定なども％で可変するようにしたことで、要素全体が伸縮するようになりました！
ありがとうございました！