Flexbox と Gridレイアウトの使い分け

Flexbox と グリッドレイアウトの特徴(違い)は

Flexboxは一列に並んでいく（折り返すにしても）

Gridレイアウトは縦横のマス目状に配置するもの

という感じでしょうか。

やってみた印象としては、きっちり縦横の幅を決めてレイアウトするのには、Gridレイアウトのほうが分かりやすいですね。

逆に、このような柔軟性のあるレイアウトは、Flexboxでないとできませんね。

否、できなくはないけれど、ものすごい細かくグリッドを設定しなければならないですね。

逆に言えば、幅を揃えるのがFlexboxは苦手と言えるかも。幅を揃える事にこだわらず自動的に隙間をぴっちり埋めるのには Flexbox が向いていますね。

Gridレイアウトは、最初に全体のレイアウトを決めて設計してから作る必要がありますね。
全体の幅などが最初からしっかり決まっている＝ページ全体のレイアウトに向いているというのはそのためなのですね。（※ただし、Gridレイアウトは古いブラウザではレイアウトが崩れる可能性も高い。）

しかし、例えば、テキストを回り込ませたい場合には、Float でしかできません。

決まった幅の中では、隙間を自動的に埋めてほしいならFlexboxのほうが良いですね。

適材適所、ページ全体のレイアウトを Gridレイアウトで作り、ナビゲーションボタンなどを Flexbox で、記事の文章部分は Float で、という使い分けが良いのかも知れませんね。