レスポンシブ(カード型レイアウト)ができた
はじめに
現在、自身で作成しているプロダクトにおいて使用しているもので、
なんかレスポンシブっぽくなっていたので、そのやり方をご紹介
完成動画は
このような形です。
(ちなみに完成動画は
grid-template-columns: repeat(auto-fill, minmax(34rem, 33%))
で上げてしまってます。実際は33%→1frに変更してます)
<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, 1fr));
}
複数アイテムを内包する親コンテナに上記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
→カードの枚数が固定である場合
Discussion