こんにちは！畠中です。
私事ですが最近はコーダーの仕事をするようになり、毎度頭を抱えております。泣
ペーペーコーダーの畠中の学びを備忘録としてこれから綴っていきたいと思います！

さて、今回はGrid？Flex？どっち？？問題です。
どちらも要素を綺麗に並べるためのCSSですが、得意なことが少し違うんです。

特にCSS GridはCSSでの調整をシンプルにできるメリットもあります。
この記事では、FlexとGridの使い分けの考え方について説明します。
（初歩の初歩ですが…）

FlexとGrid、結局どっちを使う？

皆様はどのように使い分けていらっしゃるでしょうか。
私は「縦横均等に並んでるものはGrid」とだけ決めて使っており、そこそこの頻度で悩んでおりました。
flexでコーディングしてみたら全くうまくいかないとか、その逆も時々ありますよねぇ。

Flexbox：1方向のレイアウトが得意

flexboxは、基本的に横方向または縦方向に要素を並べることが得意です。
例えば、Webサイトのヘッダー。

このように、
・ロゴ
・メニュー
・ボタン
などを横一列に並べたい場合は、Flexboxが使いやすいです。

Grid：「行と列」のレイアウトが得意

一方、Gridは行と列の両方を意識したレイアウトが得意です。
例えば、お知らせ一覧ページなどによくあるカード一覧。

まとめ：「1次元ならFlex、2次元ならGrid」と考えましょう

Flexが得意

・ヘッダーメニュー（横並び）
・ボタンを横並びにする
・アイコンと文字を横に並べる

Gridが得意

・カードを3列に並べる
・メイン + サイドバーを作る
・ページ全体のレイアウトを作る
・複雑な行・列のレイアウト

ただし、「Flexは横、Gridは縦横」と完全に分ける必要はないようです。
ページ全体のレイアウトを組むにはGrid、各パーツの細やかな整列はFlexという使い分けもできます。

補足：コーディングしてて感じたこと

個人的にですが、Webサイトによくある「画像 + 文章」のレイアウトはGridでコーディングするとシンプルに考えやすいと思いました。

特に画像と文章の比率が均等ではない場合は、Gridを使うと「grid-template-columns」の指定を確認するだけで比率がわかるので、とてもわかりやすいです。

結局は、どんどん使って自分的に使いやすい方を選べばいいのではと思います。
上手に使い分けて、コーディングをシンプルにスピーディにできるように一緒に頑張りましょう！

メルマガ登録