レスポンシブ(カード型レイアウト)ができた

はじめに

現在、自身で作成しているプロダクトにおいて使用しているもので、

なんかレスポンシブっぽくなっていたので、そのやり方をご紹介

完成動画は

https://twitter.com/torihazi/status/1733139622807695427
このような形です。

(ちなみに完成動画は

grid-template-columns: repeat(auto-fill, minmax(34rem, 33%))

で上げてしまってます。実際は33%→1frに変更してます)

/* 実際の投稿部分、phpで繰り返し表示してますが、見づらいので抽出しました。 */
<div class="articles_container">
    <div class="article_box">
        <div class="user_article_image">
            <a href="">
                   <img class="article_img" src="">
            </a>
        </div>
        <div class="user_article_title">
           title
        </div>
        <div class="user_profile_container">
           <div class="user_profile_box">
               <a class="user_profile_anchor" href="#">
                   <img class="profile_icon" src="#">
               </a>
               <span class="user_profile_name">name</span>
           </div>
           <div class="user_good_box">
               <i class="like-btn fa-heart active fas"></i>
               <span class="">0</span>
           </div>
         </div>
     </div>
・・・・・・article_boxを繰り返し
</div>
  

/* 今回のメインはこの部分 */
.articles_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr));
}
/* ここまで /*

/* 以下は参考程度に */
article_box {
    margin: 1rem;
}

.user_article_image {
    transition: all 0.3s;
}

.user_article_image:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

.article_img{
    width: 100%;
    border-radius: 0.5rem;
}

.user_article_title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0.5rem;
}

.user_profile_container {
    display: flex;
    justify-content: space-between;

}

.user_profile_box,
.user_good_box {
    display: flex;
    align-items: center;
}

.profile_icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
}

.user_good_box i,
.user_good_box span {
    font-size: 2rem;
}

.like-btn {
    cursor: pointer;
}

.active{
    color: #f60909;
}

結論

.articles_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34rem, 33%));
}

複数アイテムを内包する親コンテナに上記cssを設定する

説明

display: grid;

グリッドレイアウトを使用する

flexボックスと違って、縦横自由に内包するアイテム(divボックス等)を扱える。

(設定するとマス目のようなものが開発ツールからgridをクリックで参照できる。)

grid-template-columns:

グリッドレイアウトにおいて、横方向に並べるアイテムの数を設定可能。

repeat(繰り返す回数、繰り返す値)

文字通り、設定した値を繰り返す

auto-fill

親要素の余白に応じて、その余白を空のグリッドで埋めるようにする
これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

※似たもので auto-fit があります。

しかし、これは投稿が1つしかない時レイアウトが崩れるので不採用。

実際例は下のおまけで。

minmax(最小値、最大値)

設定した値が最小値と最大値の間になる

(いろいろ使い方あるかもしれませんが、どちらかは固定値、一方は割合値がいいかと)

以下の記事を私は参考にしました。

grid-template-columns ＋ repeat で可変するレイアウトを作成しよう！ - WEB制作小ネタ集

終わりに

このやり方ができたのは、ふと見た X の投稿がきっかけです。

あまり見過ぎで勉強の妨げになっては本末転倒ですので

ほどほどに使っていきたいと思います

おまけ

auto-fitとauto-fillのレイアウトの違い

投稿の数によって、大きく崩れました。

投稿枚数が1枚の時

auto-fill(余白に空ボックスが設定されています)

auto-fit(画像が大きくなりました。)

auto-fitの方は、私のcssがおかしいのかもしれませんが、そうでないとしたら

使い分けは下記の通りになるかと思います。

auto-fill

→カードの枚数が可変である場合。

auto-fit

→カードの枚数が固定である場合