【2023年度版】どっちを使う？Grid とFlex

以前の記事（https://nanasaninc.com/blog/grid_or_flex/）から9ヶ月っくらい経ち、その間いろいろコーディングをしてきての実感として新たに書いてみようかと思います。

結論からいうと、flexよりも、gridの方が便利。

ただし、gridでは難しい場合もあるので、grid>flexのような感じです。

前回、Flexにグローバルメニューもgridで簡単に記述できましたし、左右に分かれる単純なボックスもgridで表現できました。

gridとflexについては2次元と1次元とよく言われます。

Gridは縦横を同時に設定できるのに対して、flexは基本縦か横しか設定できません。そのことが、2次元と1次元といわれる所以だと思います。
2行とかにできるといったりしますが、あくまでもカラム落ちのようなもので縦を設定できるとは言い難いかもしれません。

メリット

親要素でレイアウトが完結すること（grid-template-ariasを除く）

これは記述していて、一番思います。

子要素に大きさを書く必要がないので、楽ですしコードの見通しも良くなります。

デメリット

単純なレイアウトでは問題ないのですが、複雑になると途端に難しくなります。

そのようなときは、grid-template-areasを使って分かりやすくするか、紙に書いてやるといいかと思います。個人的には結構、多様しています。

思想的な部分が多いですが、今回はここまで次回以降は具体的な事例を出せたらと思います。