くまだどうも、くまだです。
Gridもflexも要素を横並びにすることができますが、使い分けに迷ったときはこう。
要素を横に並べるときのGridとFlexbox
要素を横に並べるCSSプロパティといえばGridとFlexboxですが、使い分けはどうするか。
例えば、下記のようなカテゴリーやタグを横に並べるパターンのときは、GridよりもFlexboxのほうが得意です。
<ul class="list">
<li class="item">テキストテキスト</li>
<li class="item">テキストテキ</li>
<li class="item">テキ</li>
<li class="item">テキスト</li>
<li class="item">テキストテキストテキストテキストテキスト</li>
</ul>.list {
display: flex;
flex-wrap: wrap;
/* 調整用 */
margin-left: 40px;
margin-top: 40px;
max-width: 240px;
}
.item {
margin-right: 8px;
margin-top: 8px;
background-color: pink;
}
↑みたいな感じで並べられます。
もし、上のやつでGridを使うと、
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 調整用 */
margin-left: 40px;
margin-top: 40px;
max-width: 240px;
}
.item {
margin-right: 8px;
margin-top: 8px;
background-color: pink;
}
↑のように、要素が短いものが、要素の大きいもの（上の例だと縦に長いもの）に影響されてしまいます。
Gridは、タイル型のような規則的な配置に並べるのが得意なので、下記のパターンならGridはあり。
<div class="cardWrap">
<div class="card">
<div class="card__img">
<img src="images/dummy.png" alt="">
</div>
<p class="card__title">タイトルタイトル</p>
</div>
<div class="card">
<div class="card__img">
<img src="images/dummy.png" alt="">
</div>
<p class="card__title">タイトルタイトル</p>
</div>
<div class="card">
<div class="card__img">
<img src="images/dummy.png" alt="">
</div>
<p class="card__title">タイトルタイトル</p>
</div>
</div>
.cardWrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
/* 調整用 */
max-width: 80%;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
}
もちろん、上のパターンはFlexboxでも並べられますが、体感、Gridのほうが使いやすい印象です。
結論としては、
- カテゴリーやタグのような「情報量によって横幅が可変するもの」を並べるならFlexbox
- 規則的な配置に並べるならGrid
という感じです。細かいところ上げればもっとあるかもしれませんが、大まかに横並びどっち使うかだったらこの区別で使い分けるといいかもです。
ここまで読んでくださりありがとうございした。