要素をタイル状に配置するのに使うflexgridはどっちがいいのでしょうか、またそれぞれの使い所を考えてみます。

 girdはスマホ ・モバイルで使えない?

2017年7月現在、ios、Androidでgridはサポートされていないようです。iosはflexが使えます。

エリアの並び変えならgridで

SEO対策として、bodyの近くに重要なコンテンツを配置しますが、その場合、コーディングは本文》サイドバー》タイトル》ヘッダー》フッターのように組み立てます。これをgrid-areaを利用して、並び変えを行います。 またレスポンスシブを想定して、モバイルでワンカラム、タブワンカラム+アルファ、PCで2カラムなどの組み替えも、メディアクエリでエリアを変更します。スマホ用はワンカラムが多いのでflexとorderで並び順を変更します。

コンテンツの並び変えもgridで

grid-template-columns: repeat(3, fit-content(300px));
ソースコード装飾ならGoogle code prettify

gridの柔軟なrepeatで同サイズのTile並びは簡単にできます。スマホ、タブレットではgridが使えないためflexですが、カラムが3個以内であれば問題無いでしょう。

インラインはcolumnsで文字組み

flexとgridには関係ないですが、インラインの文字組みはcolumnsで行います。

gridとFlexどっちがいい?

gridの方が簡単で便利です。スマホ対応でflexしかないようです。皆さまはどうでしょうか? タイル状に並べるにはfloattable-cellでした。フレキシブルなデザインに対応するためにはcss3から使えるflexgridを利用しましょう。