FlexboxとCSS Gridの使い分け

Flexboxが主流になりfloatはほぼ使わなくなった印象はあるが、CSS Girdが台頭してFlexboxの代わりになるかもという話を聞いた。

CSS Gridについて履修したところ、どうやら完全互換というわけではなさそうなので、ここに違いをメモしておく。

以下のサイトが参考になった https://webliker.info/css/flexbox-grid/

向いているレイアウト

• CSS Grid
  • タイルレイアウト
  • ページの大枠のレイアウト（サイドバーやボディとなる部分）
  • メディアカードなどグリッドレイアウトが意識されたデザイン
  • レイアウトの枠が決まっている（カード）
• Flexbox
  • シンプルな横並び要素
  • 両端揃いで均等配置した場合（ヘッダーレイアウトとか）
  • 内容が増えて折り返しの可能性がある場合（タグ一覧）
  • 片方が固定で片方は自動で伸縮（吹き出し）

違い

flexは横並びにしてから子要素の幅や配置を決める gridは先に配置する位置に線を設定して、区切られた領域に子要素を配置する flexは子要素に横幅や高さを指定するが、gridは親要素に指定する。 CSS Gridは業と列の数や幅が不確定だと実装が複雑になるのでそういったケースはflexを使うのが良さそう