どっちを使う？Grid とFlex

「grid」「flex」の両方が使えるようになって、CSSコーディングが便利になりました。
しかし、使い所の判断って難しい気がしますよね。
最近まで、「flex」一択でしたが、「grid」が加わり記述方法に戸惑いましたが最近は「grid」にも慣れてきましたので、現在個人的な意見として「grid」「flex」の使い所を書いてみようと思います。
※まだ経験値を継いでいる段階なので、今後変わる場合があります。

grid

文字通り、レイアウトが格子状になるものに向いています。

1.全体のレイアウト

全体的なレイアウトに使用します。
コンテンツが少ない場合、フッターを下部に設置する記述が便利ですね。

2.上下左右センター

Flexでも可能ですが、以下の2行でいけるので、ソースが若干短くなっていいですね。

display: grid;
place-items: center;

3.等幅の繰り返し

カード的な表示とか、以下の表示でできるので便利です。

display: grid;
grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));

Flex

「grid」でも、できることが多いのですが、一応格子状以外のものにしています。

1.グローバルメニュー

大体が1列に並んでいるので「flex」でいいのではと思います。

2.左右に分かれる単純なボックス

左に画像、右にテキストなどで、以下の記述すると簡単に左右が入れ替わります。

display: flex;
flex-direction: row-reverse;

共通

「grid」「flex」で「gap」があります。
これが一番便利ではないか思います。
「gap」がないときは、ネガティブマージンを使っていました。「gap」の登場で「grid」「flex」の子要素の間隔が「gap」一つで可能になり、コードもスッキリしたと思います。

最後に

なんだかんだ言って、「grid」が便利だということ。
「grid」であれあば、子要素の大きさも、「grid」内に記述できるため、コード的にもメンテナンス性的にも、スッキリしていい感じです。

難点を言えば、複雑なレイアウトを「grid」でやろうとすると、頭だけでは難しく、紙に書かないと混乱してしまうことでしょうか？これも慣れだと思うのですが・・・。

最後の最後に、display: float;  もたまに使いますよ。