CSS GridとFlexboxの使い分け
先日友人主催の勉強会（参加者募集中！）で「CSS grid」の概要を自習＆プレゼンさせてもらいました。その時に、現状主流の手法「flex box」とどう使い分けていくのかをもう少し整理したいなと思った次第。
あくまで個人の現在の見解で、今後仕様や環境が変わっていく上で変化していくと思います。CSS Gridってなんだという方は下記参考。
【個人的結論】以下条件全て満たす→gridを検討。
・ターゲットはもちろんモダンブラウザだ！（Internet Explorerではない）
・要素の数やサイズは既に決まっている
・横方向だけではなく、縦方向も細かく制御したい
・装飾的な理由でHTML構造を妥協したくない
IEでgridはまだなんか工夫が必要な場合ある
下記のようにだいぶInternetExplorerでも対応できるようになっていますが、まだ非対応のプロパティがあったり工夫が必要です。IEを全世界の端末から消して回るヒーローがいたら彼は平和賞受賞でしょう（制作側的に）。
要素が増減・可変する場合にはflexboxの方が楽
ナビゲーションメニューのように後から要素の数が増える可能性があったり、文字の長さで幅がそれぞれ違うなど決め打ちできないとき、予め格子を作って割り当てるという概念のgridはちょっと不利です。
gridは縦方向まで自由度が高い
flexboxでも要素の順番を変えたり（order）、複数行にわたる（flex-wrap）場合なども制御できますが、あくまで親タグの中で流し込むという考え方です。なので予め縦方向の組み方が決まっている場合などはgridの方が真価を発揮します。特に雑誌の紙面などDTPではおなじみのレイアウトの時など。
「横に並ばせるためのdiv」から解放される
上述の通り、flexboxは「親タグの中に入った要素の並びをフレキシブルに制御できる」ものです。その結果、関係の薄い要素同士をまとめたり、横並びが出てくる度にdivタグを付与したりと、HTMLの文章構造を妥協することになる場合もあります。
gridは「HTMLの要素に格子内の領域を割り当てる」という考え方のため、装飾的な意図からHTMLを完全分離できることが多いです。
読めればなんでもいいという価値観もありますが、HTML構造をシンプルにした方が多様なCSSを適応しやすく、phpやjsでの干渉もしやすいです。
（まとめ）全体のレイアウトに向いているgridと、手軽さのflexbox
余白が一定の場合などページ全体構成では積極的にgridを使い、ナビゲーションなど子要素を横並びにしたいだけの時はflexboxで、と併用するのがいいのかなという印象です。
以上です！何かすこしでも役に立てば嬉しいです。
コメントもお待ちしてます。
この記事が気に入ったらサポートをしてみませんか？