FlexとGridの個人的な使い分け

ひとりCSS Advent Calendar 2022 12日目です。

今日はポエムです。Flex と Grid の個人的な使い分けについて書きます。

どっちがいいの

Flex も Grid も一長一短ある

• Flex のほうが直感的に組める
  • flex も使えるけど width で横幅を指定できる
  • float の時代からマークアップやっていた人はたぶん脳死で組める
• Grid は技術的に将来有望
  • 単純に情報を追いかけるだけでもたのしい（感想）
  • 今、ページのレイアウトを組むなら Flex より Grid のほうがいいのかもなあと思う
    • ボックスに名前つけられるし
  • Masonry レイアウトとか3行で書けるの夢がある（実装はこれから）
• 結論
  • ページのレイアウトを組むなら Grid
  • ページの中のコンテンツでちょっと横並びにしたいときは Flex
• 異論は認める。他の人と議論したい。ぜひお願いします。

Flex と Grid の共通点

• gap で余白指定できる
  • ほんと良い、助かってる
• minmax() などを使えばレスポンシブしやすい
  • もちろんメディアクエリでもいいのだけどブレークポイントでガタっと一気にレイアウトかわるのが気になったりする
  • コンテンツを大事にしたいからどの幅でも綺麗に見せたい
  • が、実装スピード優先でメディアクエリで実装してしまっているな〜

まとめ

CSS 便利になったよね、実装者にフレンドリーになってる。ありがたい。一生推す。
めっちゃ駄文だった…すみません。