CSSのFlex BoxとGrid Layoutの違い
 Author: 水卜

FlexBoxとは

CSS フレックスボックスレイアウトCSS Flexible Box Layoutは CSS のモジュールの一つで、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です

出典: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

Grid layoutとは

CSS グリッドレイアウトは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。

表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。

出典: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

FlexboxとGridの違い

表示速度

FlexはコンテンツベースでGridはコンテナベース。
Flexはコンテンツのロード後にレイアウトが計算される。
Gridはコンテンツより先に計算される。
基本的にGridの方が速い。

セルのサイズ指定箇所

Gridはセルのサイズをコンテナで定義する。
Flexはセルのサイズをセルで定義する。

前述の通り、コンテナのロード時にすでにセルのサイズが決まるGridの方が速い。

一次元か二次元か

Flexは一次元(縦or横)、Gridは二次元(縦and横)。
Flexboxは折り返して中央表示などができるものの、あくまで一方向にコンテンツを配置していくというコンセプト。

折り返された時の幅

Flexのセルは新しい行に押し出された時、横幅いっぱいに広がる。レスポンシブな入力フォームに適する。
Gridのセルは押し出されてもその幅を維持する。インスタグラムのMypageのようなレイアウトに適する。

Flexの使い方

まずは親要素にdisplay: flexを指定。
インライン要素に使うときはinline-flexを指定。

.container {
  display: flex;
  display: inline-flex;
}

プロパティは以下を参照

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

Gridの使い方

まずは親要素にdisplay: gridを指定

.container {
  display: grid;
}

セルのサイズを相対的に指定

grid-template-columnsでfrを使うと、相対割合で1/4, 1/4, 1/4, 1/4のようなサイズ指定が可能。

.container {
  display: grid;
  max-width: 600px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

こんな書き方もある。
セルを横並びに表示するが、要素のサイズが100pxを切るところまで横幅が小さくなると勝手に改行される。

.container {
  max-width: 600px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

プロパティは以下を参照

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout