コーディング犬に聞く：「flexとgridはどう使い分ける？」
CSSを勉強していると必ず出てくるのが、
display: flex;と
display: grid;です。
初心者の頃は、
- どっちもレイアウト用？
- 結局どっちを使えばいいの？
- flexだけで十分じゃない？
- gridって難しそう…
と思う人が多いはずです。
今回は、
「flexとgridはどう使い分けるの？」
という疑問をコーディング犬に聞いてみました。
Q. flexとgridって何が違うの？
「一言で言うとこれ！」
- flex → 1方向
- grid → 2方向
です。
Q. 1方向ってどういうこと？
例えば横並び。
<div class="wrap">
<div>A</div>
<div>B</div>
<div>C</div>
</div>.wrap{
display:flex;
}すると、
A B Cと横並びになります。
縦なら、
.wrap{
display:flex;
flex-direction:column;
}で、
A
B
Cになります。
つまりflexは、
「横か縦」
のどちらかを管理するのが得意です。
Q. gridは？
「表みたいなレイアウトです。」
例えば、
.wrap{
display:grid;
grid-template-columns: 1fr 1fr;
}すると、
A B
C Dみたいに配置できます。
Q. じゃあgridの方が強そう？
「実際かなり強いです。」
例えば、
商品一覧みたいなレイアウト。
□ □ □
□ □ □
□ □ □こういうのはgridが得意です。
Q. flexでもできるよね？
「できます。」
例えば、
display:flex;
flex-wrap:wrap;でも実現できます。
ただ、
列数を揃えたい時はgridの方が圧倒的に楽です。
Q. flexが得意なものは？
「ナビゲーションです。」
例えば、
ホーム
サービス
会社概要
お問い合わせを横並びにしたい時。
display:flex;
justify-content:space-between;だけで完成します。
他にも、
- ボタン横並び
- ヘッダー
- SNSアイコン
- ページャー
などはflexが便利です。
Q. gridが得意なものは？
「カード一覧です。」
例えば、
商品
商品
商品
商品
商品
商品こういうもの。
WordPressだと、
- ブログ一覧
- 制作実績一覧
- スタッフ一覧
- 商品一覧
はgridがかなり使いやすいです。
Q. 実際の案件ではどう使う？
「両方使います。」
例えば、
カード一覧
.cards{
display:grid;
}カードの中
.card{
display:flex;
}こんな感じ。
つまり、
gridの中にflex
が普通にあります。
Q. gridだけで全部できない？
「できるけど面倒です。」
例えば、
ロゴ メニューなら、
flexの方が圧倒的に楽です。
Q. 初心者はどっちから覚える？
「flexです。」
理由は単純。
使う頻度が高いから。
まず覚えるべきは、
display:flex;
justify-content:center;
align-items:center;です。
これだけでかなりのレイアウトが作れます。
その後に、
display:grid;
grid-template-columns:を学べば十分です。
Q. Web制作会社ではどう？
「ほぼ両方使います。」
最近の案件だと、
- ヘッダー → flex
- カード一覧 → grid
- CTAボタン → flex
- フッター → grid
みたいな感じです。
Q. 迷った時はどうする？
「1列ならflex、表ならgrid。」
これだけ覚えればOK。
例えば、
横並び
□ □ □ □flex
商品一覧
□ □ □
□ □ □
□ □ □grid
これが一番分かりやすい判断基準です。
まとめ
flexとgridは、
どちらも現代のWeb制作で必須のCSSです。
違いを一言で言うと、
- flex → 1方向のレイアウト
- grid → 2方向のレイアウト
です。
初心者のうちは、
まずflexを覚えましょう。
そして、
商品一覧やブログ一覧を作るようになったらgridを学ぶ。
この順番が一番理解しやすいです。
Web制作の現場では、
「flexかgridか」
ではなく、
「flexもgridも使う」
が正解です。
コーディング犬との約束です。
