floatでレイアウトを組んでいたことが懐かしいくらいに、Flexboxが主流となり、最近はボックスの間隔とかすごく楽に設定できるのでCSS Gridを使用する場面が増えました。
「Flexboxの時代も終わりかぁ…」なんて思ってしまいましたが、二つとも似て非になるものと言いますか、場面によってはCSS GridよりFlexboxで組むほうが正解！なんてこともあったので、ここでは「どういう時にCSS Grid（Flexbox）がいいの？」を解説していきたいと思います。
そもそもFlexbox
Flexbox（Flexible Box Layout Module）は、Webページの要素を柔軟にレイアウトするためのCSSレイアウトモジュールです。従来のfloatやdisplay: tableなどのレイアウト方法と比較して、以下の点で優れています。
- アイテムを横方向または縦方向に並べる
- アイテムのサイズを自動的に調整する
- アイテムを中央揃え、左右端揃え、上下端揃えにする
- アイテム間の隙間や余白を自由に調整する
- 折り返しを許可する
- 順序を入れ替える
これらの機能を活用することで、様々なレイアウトを作成することができます。
Flexboxを用いた例 ） ①予測できないレイアウト数に対する配置
See the Pen Flexbox - 01 by か。 (@s4007k) on CodePen.
Flexboxを用いた例 ） ②レイアウトが変わるような配置
See the Pen Flexbox - 02 by か。 (@s4007k) on CodePen.
また両端揃えなどFlexboxはレイアウトを柔軟に変更できるところが優れているので、「レイアウト数は決まっていないがとりあえず横並びにしたい」「後々、レイアウトが変わる可能性がある」のようなときにはFlexboxを利用するのが最適です。
CSS Flexbox エンジニアのためのWebチートシート
そもそもCSS Grid
CSS Gridは、行と列のグリッドを作成することで要素を配置します。このグリッドは、まるで方眼紙のようなイメージなので、複雑なレイアウトも簡単に作成できてしまいます。
例えば、以下のことが可能です。
- グリッドの列や行の数を動的に調整する
- 特定のセルを複数の行または列にまたがらせる
- セル間の隙間を調整する
- 要素をグリッドの特定の位置に配置する
CSS Gridを用いた例 ） ①タイル風
See the Pen CSS Grid - 01 by か。 (@s4007k) on CodePen.
CSS Gridを用いた例 ） ②カード型
See the Pen CSS Grid - 02 by か。 (@s4007k) on CodePen.
「複雑なレイアウトで組みたい」「カラム数が決まっている」ようなときにはCSS gridはとても最適です。
まとめ
FlexboxとCSS Gridは過去のレイアウト方法と比べて、崩れにくく安定したレイアウトを作成できます。また、フレキシブルに対応しているため初心者でも扱いやすいレイアウト方法です。
| CSS Grid | Flexbox | |
|---|---|---|
| 柔軟性 | やや低い | 高い |
| 複雑性 | やや高い | やや低い |
| 適用例 | 複雑なレイアウト、グリッドレイアウト | シンプルなレイアウト、要素の並べ替え |
このブログ記事では、FlexboxとCSS Gridの基本的な使い方や、それぞれの特徴、使い分けについて説明しました。
これからFlexboxとCSS Gridを学んでいきたいという方にとって、このブログ記事が役に立てば幸いです。